Introduction to Flutter, getting started with MaterialApp, Scaffold

Published in

FlutterFly

5 min readFeb 20, 2020

If you are new in development or experienced and want to learn something exciting or get bored in working with your technology, then you must try Flutter.

Flutter is a new and trending era in the field of application development.

Flutter is basically a Google’s UI toolkit for building Natively compiled applications for mobile, web and desktop from a single codebase.

It provides full native performance on both iOS and Android.

Setting up flutter :

Setting up the environment for Flutter is very easy.

Just go to https://flutter.dev/docs/get-started/install

Choose the operating system you are working on, and follow the steps on the same.

Most of the people face the problem in setting up the path permanently for a flutter, here are some tips for that:

i) Open or create ~/.bash_profile, to do so

In Ubuntu, open terminal and type

sudo <editor> bashrc

replace <editor> with your editor, mostly used editors are gedit, nano, vim, emacs, vi.

ii) Add this at the end of the file,

export PATH=<PATH TO FLUTTER DIRECTORY>/flutter/bin:$PATH

replace <PATH TO FLUTTER DIRECTORY> with the path where the flutter directory is residing.

iii) Save and close the file, close the terminal.

iv) Start a new terminal and type

Flutter Doctor

now it will work perfectly without providing path again and again.

Demo Application :

When we start a new project on flutter, it provides a default application. This is a demo application for users to get started easily. It helps the user to know basic syntax about the application to be built.

Here is the quick peek of the demo application:

In this application the number 0 increments its value when the user presses the + icon located at the bottom right corner.

MaterialApp

Material App is a pre-defined class used in the flutter. It contains widgets that are used for the material design of an application.

Properties of MaterialApp:

Theme:

This property is used to change the theme of an application.

MaterialApp(
  theme: ThemeData(
      brightness: Brightness.dark,
      primaryColor: Colors.blue
  ),
)

In the above example, we have changed the theme from dark to light. Users can choose between these according to their needs.

DebugShowCheckedModeBanner:

This property of MaterialApp is used to add or remove the small DEBUG banner at the top right corner of an application.

MaterialApp(
  debugShowCheckedModeBanner: false,
  )

Home:

This property defines the starting point of an application. Ip provides the default route unless the initial route is specified.

MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.blue
  ),
  home: Scaffold(
    appBar: AppBar(
      title:Text('MaterialApp Demo Theme'),
    ),
  ),

here we have set Scaffold as the initial path by assigning it to the home of MaterialApp.

Scaffold

The scaffold is another class used in flutter for application design. It implements the basic material design visual layout structure. This class provides API for showing snackBar, drawers, bottom sheets.

Properties of Scaffold:

AppBar:

AppBar is used to display the toolbar and other widgets at the top of an application. AppBar is placed at the top of the application.

Scaffold(
  appBar: AppBar(
    title:Text('MaterialApp Demo Theme'),
  ),
),

Background Color:

Used to add color to the background of an application.

Scaffold(
  backgroundColor: Colors.cyan,
),

Body:

The body is the primary content of the Scaffold. The widget which we add in the body of the Scaffold is positioned at the top left corner of an application, after AppBar. We can use the center at the body to position the material at the center of the application.

Scaffold(
  appBar: AppBar(
    title:Text('Scaffold AppBar Demo'),
  ),
  body: Center(
      child: Text('Body of Scaffold',style: TextStyle(fontSize:40),)
  ),
),

Bottom Navigation Bar:

Bottom Navigation Bar is a Scaffold widget used to display a navigation bar at the bottom. This bar can include multiple items in the form of icon, text or both.

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Business'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('School'),
      ),
    ],
  ),
),

Drawer:

The drawer is a panel hidden on mobile devices and shown up when a button is pressed or on right/left swipe of the screen. Child of the drawer is usually a ListView whose children are drawer header and ListTile.

Scaffold(
  appBar: AppBar(
    title:Text('Scaffold Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Drawer Header',style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text('Messages'),
        ),
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
      ],
    ),
  ),
),

Floating Action Button:

Floating Action22202220 Button is an icon button which majorly resides at the bottom left corner of the screen. It is called so because of its nature, it hovers over the data and performs actions when clicked.

Scaffold(
  appBar: AppBar(
    title:Text('Scaffold FloatingActionButton Demo'),
  ),
  floatingActionButton: FloatingActionButton.extended(
    onPressed: () {},
    label: Text('Approve'),
    icon: Icon(Icons.thumb_up),
    backgroundColor: Colors.pink,
  ),
),