Flutter Overview

Flutter Widgets

• Scaffold - create the layout. Consists of
  • AppBar - a header. Typically AppBar(title: Text('my title of the app'))
  • body - body of the application
  • suports a Drawer
  • bottomNavigaiton bar
• Container - a container that can contain other widgets
  • Center widget - centres contents on the centre screen
• Text
• Image
• AppBar
• Drawer

Getting Started

flutter create <project name>

Basic Application

The entry point of the application is main.dart and the entry method is main

main(){
 runApp(MyCoolClass());
}

A basic starter class is made up of widgets. They can be

• statelessWidget - this class won't change over the life cycle of the widget
• stateful??

When a widget is created (with an optional new method) the default build method is called Most widgets support a child parameter to support easily adding widgets

A hello world widget class

class MyCoolClass extends StatelessWidget{

Widget build(BuildContext context){
  // we leave out the optional new 
  return MaterialApp(
    home: Center(child:  Text('Hell world'),
   );
  }
}
}

Assets

Assets like images are stored in the assets folder Each asset folder (or individual) assets needs to be declared in the pubspec.yaml

Containers - hold other widgets and can be styled or decorated. These decorations can be

• BoxDecoration - box has a border, a body, and may cast a boxShadow. It also maybe a circle with a radius The body of the box is painted in layers. The bottom-most layer is the color, which fills the box. Above that is the gradient, which also fills the box. Finally there is the image, the precise alignment of which is controlled by the DecorationImage class.

Container (
   decoration: BoxDecoration(
     image: DecorationImage(
       images:AssetImage('assets/beach.jpg')
       fit: BoxFit
   ),
)

other decoration classes are

• FlutterLogoDecoration ShapeDecoration UnderlineTabIndicator Api's here: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html

Layout

Drawer - common mobile organizer

Scaffold supports a drawer property. Drawer takes a single component, most commonly a list view. It also supports

• header
• background image

Navigation

Typically, small applications are served well by just using the Navigator API, via the MaterialApp constructor’s MaterialApp.routes property. more complex apps use the Router Api

we can use the Navigator class that consists a stack of pages. We use two methods

• push screens/pages on to the stack
• pop method to pop the page off

Named Routes

In the main app we can define named routes

  Widget build(BuildContext context) {
    return  MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      routes: {
        '/' : (context) => Intro_Screen(),
        '/bmi' : (context) => BmiScreen()
      },
      initialRoute: '/',
      // home not used when we are using routes
     // home:  Intro_Screen()
    );

State Management

Flutter Local Storage

Flutter Modules