Lecture 4 Container and Scaffold.pdf

Mobile Application Using Flutter Framework Lecture 3 Sabah Robitan Outline ❖ ❖ ❖ ❖ Container Properties of Container class Scaffold Properties of Scaffold class Container class Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Cont...

Mobile Application Using Flutter Framework Lecture 3 Sabah Robitan Outline ❖ ❖ ❖ ❖ Container Properties of Container class Scaffold Properties of Scaffold class Container class Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A basic container element that stores a widget has a margin, which separates the present container from other contents. Constructor of Container class Syntax: Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child, Clip clipBehavior: Clip.none}); A constructor in Dart is a special method that is used to initialize an object when it is created 1. It is similar to a function with or without parameters, but it doesn’t have a return type 2. In Dart, you can declare a constructor by creating a function with the same name as its class 1. The most common constructor is the generative constructor, which is used to create a new instance of a class and initialize any instance variables if necessary Properties of Container class 1. Child: Container widget has a property ‘child:’ which stores its children. The child class can be any widget. Let us take an example, taking a text widget as a child. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( child:const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), ); }} Properties of Container class 2. Color: The color property sets the background color of the entire container. Now we can visualize the position of the container using a background color. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( color: Colors.purple, child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), ); }} Properties of Container class 3. Height and width: By default, a container class takes the space that is required by the child. We can also specify the height and width of the container based on our requirements. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, width: double.infinity, color: Colors.purple, child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), ); }} Properties of Container class 4. Margin: The margin is used to create an empty space around the container. Observe the white space around the container. Here EdgeInsets.geometry is used to set the margin.all() indicates that the margin is present in all four directions equally. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, width: double.infinity, color: Colors.purple, margin: const EdgeInsets.all(20), child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), ); } } Properties of Container class 5. padding: The padding is used to give space from the border of the container from its children. Observe the space between the border and the text. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, width: double.infinity, color: Colors.purple, margin: const EdgeInsets.all(20), padding: const EdgeInsets.all(30), child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ),),);}} Properties of Container class 6. Alignment: The alignment is used to position the child within the container. We can align in different ways: bottom, bottom center, left, right, etc. here the child is aligned to the bottom center. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, width: double.infinity, color: Colors.purple, alignment: Alignment.bottomCenter, margin: const EdgeInsets.all(20), padding: const EdgeInsets.all(30), child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), );}} Properties of Container class 7. Decoration: The decoration property is used to decorate the box(e.g. give a border). This paints behind the child. Whereas foreground Decoration paints in front of a child. Let us give a border to the container. But, both color and border color cannot be given. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, s width: double.infinity, //color: Colors.purple, alignment: Alignment.center, margin: const EdgeInsets.all(20), padding: const EdgeInsets.all(30), decoration: BoxDecoration( border: Border.all(color: Colors.black, width: 3), ), child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ),);}} Properties of Container class 8. Transform: This property of the container helps us to rotate the container. We can rotate the container in any axis, here we are rotating in the z-axis. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Container example"), ), body: Container( height: 200, width: double.infinity, color: Colors.purple, alignment: Alignment.center, margin: const EdgeInsets.all(20), padding: const EdgeInsets.all(30), transform: Matrix4.rotationZ(0.1), child: const Text("Hello! i am inside a container!", style: TextStyle(fontSize: 20)), ), ), );}} Properties of Container class 9. Constraints: When we want to give additional constraints to the child, we can use this property. 10. ClipBehaviour: This property takes in Clip Enum as the object. This decides whether the content inside the container will be clipped or not. 11. Foreground Decoration: This parameter holds Decoration class as the object. It controls the decoration in front of the Container widget. Tip: There can be many more operations that can be performed to container class. Moreover, the container class is used often while developing flutter applications. This is just basics to get started with. Find more properties and attributes in the given link which is the official flutter documentation. Scaffold class Scaffold is a class in flutter which provides many widgets or we can say APIs like Drawer, Snack-Bar, Bottom-Navigation-Bar, Floating-Action-Button, App-Bar, etc. Scaffold will expand or occupy 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. The class Hierarchy is as follows: Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ Scaffold Constructor of the Scaffold class const Scaffold({ Key key, this.appBar, this.body, this.floatingActionButton, A constructor in Dart is a special method that is used to initialize an object when it is created 1. It is similar to a function with or without parameters, but it doesn’t have a return type 2. 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, }) In Dart, you can declare a constructor by creating a function with the same name as its class 1. The most common constructor is the generative constructor, which is used to create a new instance of a class and initialize any instance variables if necessary Properties of Scaffold Class 1. app-Bar: 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: const Text('GeeksforGeeks'), ), Properties of Scaffold Class 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 body are at the left-corner by default. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('appBar')), body: const Center( child: Text( "Welcome to Scaffold body", style: TextStyle( color: Colors.black, fontSize: 40.0, ), ), ), ); } } Properties of Scaffold Class 3. floatingActionButton: FloatingActionButton is a button that is placed at the right bottom corner by default. FloatingActionButton is an icon button that floats over the content of the screen at a fixed place. If we scroll the page its position won’t change, it will be fixed. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('GeeksforGeeks')), body: const Center( child: Text( "Welcome to GeeksforGeeks!!!", style: TextStyle( color: Colors.black, fontSize: 40.0, ), ), ), floatingActionButton: FloatingActionButton( elevation: 10.0, child: const Icon(Icons.add), onPressed: () { // action on button press }, ), ), ); } } Properties of Scaffold Class 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. Properties of Scaffold Class 4. Drawer Navigation drawer: Drawer( child: ListView( children: const [ 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'), ), ], ), ), Properties of Scaffold Class 4. Drawer Navigation Properties of Scaffold Class 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. Properties of Scaffold Class backgroundColor: used to set the color of the whole Scaffold widget. floatingActionButtonAnimator: used to provide animation to move floatingActionButton. primary: to tell whether the Scaffold will be displayed or not. drawerScrimColor: used to define the color for the primary content while a drawer is open. bottomSheet: This property takes in a widget (final) as the object to display it at the bottom of the screen. drawerDragStartBehaviour: This property holds DragStartBehavior enum as the object to determine the drag behaviour of the drawer. drawerEdgeDragWidth: This determines the area under which a swipe or a drag will result in the opening of the drawer. And it takes in a double as the object. Properties of Scaffold Class drawerEnableOpenGesture: This property holds in a boolean value as the object to determine the drag gesture will open the drawer or not, by default it is set to true. endDrawer: The endDrawer property takes in a widget as the parameter. It is similar to the Drawer, except the fact it opens in the opposite direction. endDrawerEnableOpenGesture: Again this property takes in a boolean value as the object to determine whether the drag gesture will open the endDrawer or not. extendBody: The extendBody property takes in a boolean as the object. By default, this property is always false but it must not be null. If it is set to true in the presence of a bottomNavigationBar or persistentFooterButtons, then the height of these is added to the body and they are shifted beneath the body. extendBodyBehindAppBar: This property also takes in a boolean as the object. By default, this property is always false but it must not be null. If it is set to true the app-Bar instead of being on the body is extended above it and its height is added to the body. This property is used when the color of the app-Bar is not fully opaque. Properties of Scaffold Class floating Action Button Location: This property is responsible for the location of the floating Action Button. persistent Footer Button: This property takes in a list of widgets. Which are usually buttons that are displayed underneath the scaffold. resize To Avoid Bottom Insets: This property takes in a Boolean value as the object. If set to true then the floating widgets on the scaffold resize themselves to avoid getting in the way of the on-screen keyboard. Any Question ?