The complete flutter development bootcamp with dart: Angela

The runApp(Widget widget) function

The minimal Flutter app simply calls the runApp() function with a widget:

import 'package:flutter/material.dart';

void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}

The runApp() function takes the given Widget and makes it the root of the widget

tree. In this example, the widget tree consists of two widgets, the Center widget
and its child, the Text widget. The framework forces the root widget to cover the
screen, which means the text “Hello, world” ends up centered on screen. The text
direction needs to be specified in this instance; when the MaterialApp widget is
used, this is taken care of for you, as demonstrated later.

When writing an app, you’ll commonly author new widgets that are subclasses of
either StatelessWidget or StatefulWidget, depending on whether your
widget manages any state. A widget’s main job is to implement a build() function,
which describes the widget in terms of other, lower-level widgets. The framework
builds those widgets in turn until the process bottoms out in widgets that represent
the underlying RenderObject, which computes and describes the geometry of the
widget.
import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    title: 'GeeksforGeeks',
    theme: ThemeData(
      primarySwatch: Colors.green
    ),
    home: Scaffold(
      appBar: AppBar(
        title:Text(
          'GeeksforGeeks'
        )
      ),
    ),
  ));
}

 import statement: The import statement is used to import the libraries that are provided by

the flutter SDK. Here we have imported the ‘material.dart’ file. We can use all the flutter
widgets that implements material design by importing this file.
 main() function: Like many other programming languages, we also have main function in
which we have to write the statements those are to be executed when the app starts. The
return type of main function is ‘void’.
 runApp(Widget widget) function: The void runApp(Widget widget) takes a widget as an
argument and set it in a screen. It gives the constraints to the widget to fit into the screen. It
makes the given widget as the root widget of the app and other widgets as the child of it.
Here we have used the MaterialApp as a root widget in which we have defined the other
widgets.
 MaterialApp() widget: Let us have a look on the different properties of the MaterialApp
widget.
 title: This property is used to provide a short description of the application to the
user. When the user press the recent apps button in mobile the text proceeded in title is
displayed.
 theme: This property is used provide the default theme to the application like the
theme-color of application.
For this we use the inbuilt class/widget named ThemeData(). In Themedata() widget we
have to write the different properties related to theme. Here we have used
the primarySwatch which is used to define the default themecolor of application. To
choose the color we have used Colors class from the material library. In ThemeData()
we can also define some other properties like TextTheme, Brightness(Can enable dark
theme by this), AppBarTheme and many more…
 home: It is used for the default route of the app means the widget defined in it is
displayed when the application starts normally. Here we have defined
the Scaffold widget inside the home property. Inside the Scaffold we define various
properties like appBar, body, floatingActionButton, backgroundColor, etc.
For example in the appBar property we have used the AppBar() widget in which as a
title we have passed ‘GeeksforGeeks’ which will be displayed at the top of the
application in appbar.
 The other properties in MaterialApp() are debugShowCheckedModeBanner (used to
remove the debug tag at top corner), darkTheme (To request dark mode in
application), color (For primary color of application), routes (For routing table of
application), ThemeMode (To determine which theme to be used) etc.

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: Center(
          child: Image(
            image: AssetImage('images/alishaw2.jpg'),
          ),
        ),
        appBar: AppBar(
          title: Center(
            child: Text('This is my First App'),
          ),
          backgroundColor: Colors.blueGrey[900],
        ),
      ),
    ),
  );
}

What is Material App ?

An application that uses material design. A convenience widget that wraps a number
of widgets that are commonly required for material design applications. It builds
upon a WidgetsApp by adding material-design specific functionality, such as
AnimatedTheme and GridPaper.

The MaterialApp class itself has a long list of named parameters conveying its
influence and importance in making such apps in Flutter. It’s the MaterialApp widget
that defines the theme (the ‘look and feel’) of your app. It’s to the MaterialApp object
where you specify the list of ‘routes’ to any and all the separate screens that will
make up your app. You can also tell the MaterialApp object, which will be the first
screen (the ‘home’ screen) when your app first starts up. It’s to the MaterialApp
object where you give a title to your app. Further, it’s to the Material object where
you specify what locale to use to for your app. In other words, how to display values
that are location-specific etc etc.
As a quick aside, note the MaterialApp widget is a StatefulWidget. That tells you
things can change in such an object. It retains a state, but that state is free to
change.

What Route To Take?

To ‘move about’ to more than one screen in a Flutter app, the concept of ‘routes’ is
utilized. The MaterialApp requires the named parameter, routes, not be null and so
it’s assigned, by default, what’s simply an empty Map object. The key apparently is a
String object, and its value is of the function-type (see typedef) called,
WidgetBuilder.
Your Initial Route

Note, in the example an ‘initial route’ is specified with the named parameter, initialRoute. This will
indicate what the first screen will be when the app first starts up.

As it happens, this example is a little misleading, you need not explicitly specify the forward slash,
`/` as it’s the default value even if the named parameter, initialRoute, was not provided. And so,
commenting it out will bring about the same results. Anyway, for our endeavours, the real interest
in this example is the routes parameter. It’s a Map object listing all the screens one can navigate
to in this app. Again, the `/` signifies the ‘home screen.’ In this example, the home screen is
named, `/`, and the other screen is named, `/second.`
For example, the assigning of a default value to the routes parameter implies, routes need not be
specified. And so, what happens then if you don’t provide the parameter, routes, a Map of named
WidgetBuilders?? It defaults to an empty Map object, I know, but then what? Now, the app has got
to start somewhere. A ‘first screen’ must be specified. Now in this example, there’s no ‘routes’
parameter. However, there is the named parameter called, home, being used instead. What does
that do? Judging from the name, ‘home’, you’d guess correctly it specifies the first screen to
display.

What is Scaffold ?
In the documentation, it stipulates that at least one of the following named
parameters must be passed to the MaterialApp object and must not be null: home,
routes, onGeneratedRoute, or builder. Further, as we’ve already seen, if only
‘routes’ is provided, it must include an entry for the `/` so to present a screen when
the app is first launched.

In fact, there is an order to things in this regard. If the parameter, home, is not null,
then it provides the ‘home screen’. Simple enough. Otherwise, if the parameter,
routes, was provided and there’s a forward slash entry (`/`), then that’s your ‘home
screen.’ However, if such an entry doesn’t exist, and no parameter, home, the
Flutter framework looks to the fourth of the seven parameters indicated above. The
callback function, onGenerateRoute. If provided, it’s called upon to return the first
screen. Finally, if the parameter, onGenerateRoute, is not provided and the
parameter, builder, is not provided, then the fifth parameter, onUnknownRoute, is
called upon — if provided. Note, the parameter, onUnknownRoute, is called if at any
time there’s an ‘unknown route’ event in your app. Now, after that, if it’s not there
either…well, you’re then typically presented with a blank screen at startup. Ta-da!

What is Scaffold ?

Scaffold is a class in flutter which provides many widgets or we can say APIs like
AppBar, Drawer, SnackBar, BottomNavigationBar, FloatingActionButton etc.

Scaffold will expand or occupy in the whole device screen. It will occupy the
available space. Scaffold will provide a framework to implement the basic material
design layout of the application.

Class Hierarchy:

Object
↳ Diagnosticable
↳ Diagnosticable Tree
↳ Widget
↳ StateFul Widget
↳ Scaffold

Constructor of the Scaffold class:

const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior
 = DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
})

Properties of Scaffold Class:

1. appBar: It displays a horizontal bar which mainly placed at the top of the
Scaffold. appBar uses the widget AppBar which has its own properties like
elevation, title, brightness etc.
Widget build(BuildContext context)
{
  return Scaffold(
    appBar: AppBar(
      title: Text('GeeksforGeeks'),
),

2. body: It will display the main or primary content in the Scaffold. It is below the
appBar and under the floatingActionButton. The widgets inside the the body
are at left-corner by default.
 Widget build(BuildContext context)
{
  return Scaffold(
    appBar: AppBar(
      title:
Text('GeeksforGeeks'),
    ),
    body: Center(
      child: Text("Welcome
to GeeksforGeeks!!!",
        style: TextStyle(
          color:
Colors.black,
          fontSize: 40.0,
        ),
      ),
    ),

In this example, we have displayed a text Welcome to GeeksforGeeks!!! in the

body. We have displayed the text in the center of the page using Center
widget. For styling the text, we have used TextStyle widget.

3. floatingActionButton: FloatingActionButton is a button which is placed at the

right bottom corner by default. FloatingActionButton is an icon button which
floats over the content of screen at a fixed place. If we scroll the page its
position won’t change, it will be fixed.
Widget build(BuildContext context)
{
  return Scaffold(
      appBar: AppBar(title: Text('GeeksforGeeks')),
      body:  Center(
        child: Text("Welcome to GeeksforGeeks!!!",
          style: TextStyle(
            color: Colors.black,
            fontSize: 40.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: Icon(Icons.add),
          onPressed: (){
        // action on button press
           }
      );
}

Here the elevation property is used to give a shadow effect to the button. Icon
is used to put the icon of the button using some of the preloaded icons in
flutter SDK. The onPressed() is function which will be called when the button is
pressed and the statements inside the function will be executed.

4. drawer: drawer is a slider menu or a panel which is displayed at the side of

the Scaffold. The user has to swipe left to right or right to left according to the
action defined to access the drawer menu. In the Appbar, an appropriate icon
for the drawer is set automatically at a particular position. The gesture to open
the drawer is also set automatically. It is handled by the Scaffold.
drawer: Drawer(
          child: ListView(
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'GeeksforGeeks',
              style: TextStyle(
                color: Colors.green,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
        ],
      ),
    ),
As a parent widget we took ListView and inside it, we divided the panel into
two parts, Header and Menu.DrawerHeader is used to modify the header of
the panel. In header we can display icon or details of user according to the
application. We have used ListTile to add the items in the menu.
 We can also add icons before the items using the property leading of ListTile,
inside which we have to use the Icon widget.
Example:

ListTile(
    title
    : Text('Item 1'),
      leading
    : Icon(Icons.people), ),
    ListTile(
        title
        : Text('Item 2'),
          leading
        : Icon(Icons.mail), ),

5. bottomNavigationBar: bottomNavigationBar is like a menu at the bottom of

the Scaffold. We have seen this navigationbar in most of the applications. We
can add multiple icons or texts or both in the bar as items.
bottomNavigationBar
    : BottomNavigationBar(
          currentIndex : 0,
          fixedColor
           : Colors.green,
            items
          : [
              BottomNavigationBarItem(
                  title
                  : Text("Home"),
                    icon
                  : Icon(Icons.home), ),
              BottomNavigationBarItem(
                  title
                  : Text("Search"),
                    icon
                  : Icon(Icons.search), ),
              BottomNavigationBarItem(
                  title
                  : Text("Profile"),
                    icon
                  : Icon(Icons.account_circle), ),
          ],
            onTap
          : (int indexOfItem){
  
          }),

We use BottomNavigationBar widget to display the bar. For the color of active
icon we use the fixedColor property. To add items in the bar we use
BottomNavigationBarItems widget, inside which we give text and icon. For the
action performed on the tapping on the items, we have onTap(int indexOfItem)
function which works according to the index position of the item.

6. backgroundColor: used to set the color of whole Scaffold widget

7. floatingActionButtonAnimator: used to provide animation to move
floatingActionButton
8. primary: to tell whether the Scaffold will be displayed or not
9. drawerScrimColor: used to define color for the primary content while a
drawer is open

How to add app icons

Steps
1. Choose an image of which you want to make an icon.
 2. Goto appicon.co and generate a zip file of the desired(android, ios, etc) icons
you want make. That zip file contains different sized icon.
3. Move these assets into our project. Goto project navigator search for android
or ios (these folder actually inculdes the launcher icon)

Android path: {andoird-app-src-main-res} here all the mipmap folders are

icon folders.
Now copy and replace all the mipmap folder from zipped file that you
downloaded into the {RES} folder.
Ios path: {ios-runner} Now copy and replace assets.xcassets from zipped file
that you downloaded
Note: goto :- RES folder right click select new-> image asset (if you want to resize or
modify your icon

STATELESS Widgets

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 called only ONCE while the app is in
action, which is responsible for drawing the widgets on to the device screen.