Skip to main content

Simple Flutter App

The simplest of Flutter apps.

 

 

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

Scaffold
The scaffold is another class used in flutter for application design. It implements the basic material design visual layout structure. This class provides an 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.

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.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

Changing the theme

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.blueGrey
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MaterialApp Theme'),
        ),
      ),
    );
  }
}

 

adding a bottom navigation

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.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Welcome to Flutter',
      theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.blueGrey
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text(
            'Hello World',
            style: TextStyle(fontSize:40),
          ),
        ),
        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'),
            ),
          ],
        ),
      ),
    );
  }
}

adding a drawer

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.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Welcome to Flutter',
      theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.blueGrey
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        drawer: Drawer(
          child: ListView(
            children: const <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blueGrey,
                ),
                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'),
              ),
            ],
          ),
        ),
        body: const Center(
          child: const Text(
            'Hello World',
            style: TextStyle(fontSize:40),
          ),
        ),
        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'),
            ),
          ],
        ),
      ),
    );
  }
}

Basic Flutter App with bottom Drawer