Flutter 6 months Industrial Training

  Flutter: Themes If you want your Flutter app to have a stand out user experience I recommend to use Flutters theme widget. It can be used to define application wide colors , fonts and text styles. This theme can than be referenced within each widget in your app. In Flutter you can design custom themes with material app widget, they can be dark, light or colorful. The style depends on your preferred color set. In android we collect all th e theme related data in a resource directory, but in Flutter we are able to declare the theme inside the root widget of the project. MaterialApp ( ... theme: ThemeData ( ... ), // declared app theme ... ); The app theme can than be individualized by defining custom colors, fonts etc. inside the ThemeData widget. Define Application wide Colors ThemeData ( brightness: Brightness.light, primaryColor: Color(#003c7e), accentColor: Color(#4487c7), ... ) Declare Application wide Fonts ThemeData ( fontFamily:

  implement dropdown lists in Flutter To use dropdown lists we can use the DropdownButton class in Flutter. DropdownButton requires a type for the items on the list. For instance, if we would have a list of Strings then we have to define that when setting up the list. The reason that the widget is called a DropdownButton and not DropdownList, is because it actually is a clickable widget that shows the currently chose item as a text. Also, it can be pretty much styled like a button. To create a dropdown list in Flutter we can use the following code: @override Widget build ( BuildContext context ) { return Scaffold ( appBar : AppBar ( title : Text ( 'Dropdown list demo' ) , ) , body : Container ( child : Center ( child : DropdownButton < String > ( value : _chosenValue , items : < String > [ 'Google' , 'Apple' , 'Amazon' , 'Tesla' ]

Checkbox A checkbox is a type of input component which holds the Boolean value. It is a GUI element that allows the user to choose multiple options from several selections . Here, a user can answer only in yes or no value. A marked/checked checkbox means yes, and an unmarked/unchecked checkbox means no value. Typically, we can see the checkboxes on the screen as a square box with white space or a tick mark. A label or caption corresponding to each checkbox described the meaning of the checkboxes. In this article, we are going to learn how to use checkboxes in Flutter. In Flutter , we can have two types of checkboxes: a compact version of the Checkbox named "checkbox" and the "CheckboxListTile" checkbox, which comes with header and subtitle. The detailed descriptions of these checkboxes are given below:       Flutter Radio Button A radio button is also known as the options button which holds the Boolean value . It allows the user to choose only one op

  HTTP requests in Flutter GET requests _makeGetRequest() async { // make GET request String url = 'https://jsonplaceholder.typicode.com/posts'; Response response = await get(url); // sample info available in response int statusCode = response.statusCode; Map<String, String> headers = response.headers; String contentType = headers['content-type']; String json = response.body; // TODO convert json to object... } Now replace /posts with /posts/1 in the url . Using /posts returns an array of JSON objects while /posts/1 returns a single JSON object, where 1 is the ID of the post you want to get. POST request A POST request is used to create a new resource. _makePostRequest() async { // set up POST request arguments String url = 'https://jsonplaceholder.typicode.com/posts'; Map<String, String> headers = {"Content-type": "application/json"}; String json = '{"title": "Hello", "

    JSON and FutureBuilder   A Future which is of type <List<Summary>> Here the api call is made and the response data is parsed into a List. Since the api response returns a Map (R efer: ‘ Example Response ’ above ) we have to traverse the map to return just the “ countries ” data from it.   Displaying the data In your StatefulWidget (screen) define and declare the variable in the initState() method. …. Future<List<Summary>> _func; @override void initState() { _func = fetchSummary(); super.initState(); } … Now, in the body: tag of your build Widget call the FutureBuilder Note: We’ve already declared the _func in initstate() method. The Builder will return a snapshot which will contain the instance of the data.    Finally, accessing the data List and assigning the values to DataRows → DataCells. Note: country . country (index.key) Similarly all the key-value pairs can be accessed: … country.totalConfirmed.toString(), //converting the integer values cou

  Exploring Threading In Flutter Isolates At the point when Dart starts, there will be one main Isolate (Thread). It is the original main executing thread of the application, alluded to as the UI Thread. Isolates are: Dart’s version of Threads. Isolate memory isn’t shared with each other. Utilizations Ports and Messages to convey between them. May utilize another processor core if accessible. Runs code in parallel.     Future with Async & Await An async and await keywords you may use in Dart, towards a Future. When running async code: It runs in the equivalent Isolate (Thread) that began it. Runs simultaneously (not parallel) at the same time as other code, in the equivalent Isolate (Thread). It is significant, in that it does not block other code from running in a similar thread. Particularly substantial when you are in the main UI Thread. It will generally help keep your UI smooth while dealing with many events occurring in your code. Future A Future represents a task on

       1 Wrap your widget using GestureDetector: @override Widget build(BuildContext context) { return GestureDetector ( dragStartBehavior: DragStartBehavior.start , // default child: Container(....   2 Adding callback functions For getting information about where the gesture started we will need to add an implementation of two functions: onHorizontalDragStart and onVerticalDragStart . return GestureDetector( onHorizontalDragStart: _onHorizontalDragStartHandler, onVerticalDragStart: _onVerticalDragStartHandler, behavior: HitTestBehavior.translucent, child: Container(...   3. Tap onTap : () { ... do something }, 4.Double-tap onDoubleTap : () { print("DOUBLE TAB"); },   5. Long press onLongPress : () { print("Long press"); },   6. Button click And what if we have a RaisedButton with onPressed handler in our Container that is wrapped with GestureDetector? RaisedButton ( onPressed : () { print('Button pressed'); }, child:

  Flutter Container The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc. It is a widget that combines common painting, positioning, and sizing of the child widgets. It is also a class to store one or more widgets and position them on the screen according to our needs. Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets, such as using margin , which separates the container with other contents. A container widget is same as <div> tag in html. If this widget does not contain any child widget, it will fill the whole area on the screen automatically. Otherwise, it will wrap the child widget according to the specified height & width. It is to note that this widget cannot render directly without any parent widget. We can use Scaffold widget, Center widget, Padding widget, Row widge

  Flutter’s navigation and routing system When push() is called, the DetailScreen widget is placed on top of the HomeScreen widget like this: The previous screen ( HomeScreen ) is still part of the widget tree, so any State object associated with it stays around while DetailScreen is visible. Named routes Flutter also supports named routes, which are defined in the routes parameter on MaterialApp or CupertinoApp : Navigation Now when you want to navigate you’ll just use Navigator.pushNamed(context, feedRoute); This will navigate you to the FeedView. If we want to pass parameters to the Feed view that’a just a small little change. Let’s make our Feed view take in a String as a parameter. class Feed extends StatelessWidget { final String data; Feed(this.data); @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Text('Feed: $data')), ); } } Add floating action button into your homeView and onPressed we’ll push the

  Displaying Dynamic Contents using ListView.builder What is meant by Dynamic Contents? Unless an app is very basic and created for learning purposes, it will always use dynamic data i.e. Contents of the screen will change based on user actions and/or with change in network data. Most of the time, the dynamic behaviour is achieved by changing the contents that is being displayed in the body. Flutter provides ListView.builder which can be used to generate dynamic contents   Using ListView.builder(…) ListView.builder is a way of constructing the list where children’s (Widgets) are built on demand. However, instead of returning a static widget, it calls a function which can be called multiple times (based on itemCount ) and it’s possible to return different widget at each call. For example, let’s create a simple application containing basic MaterialApp with Scaffold contains AppBar and Body void main() => runApp( new MyApp()); class MyApp extends StatelessWidget { @over

  What is Scaffold? A Scaffold Widget provides a framework which implements the basic material design visual layout structure of the flutter app. It provides APIs for showing drawers, snack bars and bottom sheets. Have a look at its constructor and the properties it has. We are going to overview it’s parameters one by one.   appBar An appBar is to display at the top of the scaffold it’s one of the primary content of Scaffold without which a scaffold widget is incomplete. It defines what has to be displayed at the top of the screen. appBar uses the AppBar widget properties through Scaffold.appBar. This AppBar widget itself has various properties like title, elevation,brightness etc to name a few. body body is the other primary and minimum required property of the scaffold which signifies the area below the app bar and behind the floatingActionButton and drawer. Any widget in the body of scaffold is positioned at the top-left corner by default. Widget build(BuildContext co

  What is the difference between Stateful and Stateless Widget. In Flutter all the UI components are known as widgets. The widget which contains the code for a single screen of the app can be just of two types — Stateful Stateless Stateless Stateless widgets do not require mutable state, i.e., it is immutable . In simple words, Stateless widgets cannot change their state during the runtime of the app, which means the widgets cannot be redrawn while the app is in action. The structure of a Stateless widget looks like this: So, let’s understand what is there in this small code snippet. The name of this Stateless Widget is “ StartScreen ”, inside which we have to override the “ build” method. This build method takes in a “ BuildContext ” as the parameter and returns a widget. That’s why you can see that the return type of the build method is a widget. And this the place where you can design the UI of this screen, which is Stateless. In Stateless widget, The “ build ” method can be

  A class without constructor We use class keyword to create a class in Dart. Static Variables which live on the class should be marked with static keyword. Instance Variables and Instance Methods live on the object. this keyword inside an instance method points to the object itself, hence we can access a property of the object.   A class with a constructor A constructor is an instance method that is invoked when an object is created from the class. This is a good place to initialize instance variables. A constructor function has the same name as the class. Getters and Setters A combination of the getter and the setter methods are used to transform and/or encapsulate instance variables. In Dart, the getter is an instance method specified by get keyword. This method does not take any arguments, hence it does not contain parentheses () . While the setter method is specified by set keyword which receives value to be set as an argument. Inheritance A class has a constructor who