DESIGNING IN

FLUTTER
MOBILE APPLICATION DEVELOPMENT (MAD)
IMPORT AND MAIN FUNCTION
 import ‘package:flutter/material.dart’;
 void main(){

 runApp(required a root widget);

}

 Widget: MaterialApp()
WHAT IS A WIDGET?
 The basic building blocks
 Part of the user interface
 No views, controllers, layouts, and other properties but just Widgets
 Each widget has their own properties and usage
MATERIALAPP( )
 A widget
 Will create a Blank App
 Allow to use Google Material design features
 We can say it’s a wrapper for the other widgets
 void main(){

 runApp(MaterialApp( ));

}
MATERIALAPP( )
 Inside a Widget we can add/use various properties to design the App Screen

 runApp(MaterialApp(

 home: Any Widget

 property_name: its_value

 ));

 home (property): will display the design we need to show on the Home Screen
TEXT( ) WIDGET
 Used to show any text on the screen

 runApp(MaterialApp(

 home: Text( “ Hi, Flutter Developers! ” ),

 property_name: its_value

 ));
 WHAT IF WE NEED TO ADD
MORE THINGS ON THE HOME
SCREEN?
SCAFFOLD( ) WIDGET
 Has different attributes
 Will help us to setup the basic layout of the screen
 Action Bar
 Body
 Floating Action Buttons
 And more

 runApp(MaterialApp(

 home: Scaffold( ),
 property_name: its_value

 ));
SCAFFOLD( ) WIDGET  APP-
BAR
 runApp(MaterialApp(
 home: Scaffold(
 appBar: AppBar(
 title: Text( “ MAD Class “ ),
 centerTitle: true,
 ),
 ),

 ));
 Title Text, Color, Alignment

 Widget > Properties > Widgets > Properties…….

SCAFFOLD( ) WIDGET 
BODY
 Body will display the content/data we need to show on the screen
 runApp(MaterialApp(
 home: Scaffold(
 body: Text( “ Section of Mobile Application Development Class “ ),
 ),

 ));
 Title Text, Color, Alignment

 Widget > Properties > Widgets > Properties…….

SCAFFOLD( ) WIDGET 
BODY  CENTER
 Body will display the content/data we need to show on the screen
 runApp(MaterialApp(
 home: Scaffold(
 body: Center(
 child: Text( “ Section of Mobile Application Development Class “ ),
 ),
 ),

 ));
 Title Text, Color, Alignment

 Widget > Properties > Widgets > Properties…….

SCAFFOLD( ) WIDGET 
FLOATING-ACTION-BUTTON
 Body will display the content/data we need to show on the screen
 runApp(MaterialApp(
 home: Scaffold(
 floatingActionButton: FloatingActionButton(
 onPressed: null or ( ) { },
 child: Text( “ Tap “),
 ),
 ),

 ));
 Title Text, Color, Alignment

 Widget > Properties > Widgets > Properties…….

STYLING IN FLUTTER
 BackgroundColor
 TextStyle (fontsize, fontweight, letterSpacing, color)