App_development33333333333333333333.pptx

Introduction to Layouts in flutter

1. Flutter – Introduction to Layouts Sameeha moogab 2024

2. Outline Structural widgets Type of Layout Widgets

3. Structural widgets There are a few convenience widgets that you’ll likely use in every Flutter app you build. They provide configuration and structure to your app, with little work from you. MaterialApp widget Scaffold AppBar Theme

4. Using Material Components A Material app starts with the MaterialApp widget, which builds a number of useful widgets at the root of your app, including a Navigator , which manages a stack of widgets. The Navigator lets you transition smoothly between screens of your application. Material app implements the animations that happen when a user navigates between pages. MaterialApp takes care of the appwide theme . Home property represents the app’s home page, which can be any widget.

5. The Scaffold widget Scaffold is a designed to make applications as easy as possible to build . Scaffold is the widget that gives your app structure . Scaffold defines the “ basic Material Design visual layout ,” which means it can make your app look like this pretty easily. The Scaffold widget provides many optional features , pick and choose which features you want. It’s common for each of the different screens in your application to have its own Scaffold widget.

6. The Scaffold widget It provides functionality to add A drawer (an element that animates in from one Listing A bottom sheet (an element that animates into view from the bottom of the screen). The AppBar in a scaffold is automatically set up to display a menu button in the top-left corner of your app, which will open the drawer; Body is a Scaffold argument that represents the main portion of the screen. If there is no app bar, body is essentially the entire screen.

7. The Scaffold widget Scaffold Properties

8. AppBar widget Typically used in the Scaffold.appBar property, which fixes it to the top of the screen with a certain height. The most notable feature of AppBar is that it provides navigation features for free . It automatically inserts a menu button if the app bar’s parent is a scaffold and the drawer argument isn’t null . And if the Navigator of your app detects that you’re on a page that can navigate “back” (like a browser’s back button), it automatically inserts a back button .

9. AppBar widget Usually contains the standard title, toolbar, leading, and actions properties (along with buttons), as well as many customization options. The property that handles these menu buttons and back buttons is called the leading action . If you don’t want a menu button to appear, You can set AppBar.automaticallyImplyLeading to false and then pass the leading argument to whatever widget you wish.

10. AppBar Properties The title property is typically implemented with a Text widget . The leading property is displayed before the title property. Usually this is an IconButton or BackButton . The actions property is a list of widgets aligned to the upper right of an AppBar widget usually with an IconButton or PopupMenuButton . The flexibleSpace property is stacked behind the Toolbar or TabBar widget. A background image is commonly applied to the flexibleSpace property.

11. ThemeData widget allows you to set many default styles in your app, such as colors, font styles, button styles, and more. Theme will be automatically applied throughout your app. Flutter applies styling in the following order: Styles applied to the specific widget . Themes that override the immediate parent theme . Main theme for the entire app .

12. Type of Layout Widgets Layout widgets can be grouped into two distinct category based on its child : Widget supporting a single child Widget supporting multiple child

13. Single Child Widgets The single child layout widget is a type of widget, which can have only  one child widget  inside the parent layout widget. Single child widgets are great options to create high quality widget having single functionality such as button, label, etc.,

14. Single Child Widgets Flutter provides us many single child widgets to make the app UI attractive. Container:  It is the most popular layout widget that provides customizable options for painting, positioning, and sizing of widgets. Padding:  It is a widget that is used to arrange its child widget by the given padding. Center:  This widget allows you to center the child widget within itself. Align:  It is a widget, which aligns its child widget within itself and sizes it based on the child's size.  SizedBox :  This widget allows you to give the specified size to the child widget through all screens. ConstrainedBox :  It is a widget that allows you to force the additional constraints on its child widget.

15. Padding Widgets class CarWidget extends StatelessWidget { CarWidget ( this.make , this.model , this.imageSrc ) : super(); final String make; final String model; final String imageSrc ; @override Widget build( BuildContext context) { return Center ( child : Column( children : [ Text(make), Text(model), Image.network ( imageSrc ) ])); } } @override Widget build( BuildContext context) { return Padding ( padding: EdgeInsets.all (20.0), child : Center( child : Column( children : [ Text(make), Text(model), Image.network ( imageSrc ) ]))); }

16. The multiple child widgets are a type of widget, which contains  more than one child widget , and the layout of these widgets are unique. Multiple Child Widgets

17. Row:  It allows to arrange its child widgets in a horizontal direction . Column:  It allows to arrange its child widgets in a vertical direction . ListView :  It is the most popular scrolling widget that allows us to arrange its child widgets one after another in scroll direction . GridView :  It allows us to arrange its child widgets as a scrollable, 2D array of widgets. It consists of a repeated pattern of cells arrayed in a horizontal and vertical layout . Expanded:  It allows to make the children of a Row and Column widget to occupy the maximum possible area . Table:  It is a widget that allows us to arrange its children in a table based widget. Flow:  It allows us to implements the flow-based widget . Stack:  It is an essential widget, which is mainly used for overlapping several children widgets. It allows you to put up the multiple layers onto the screen . Multiple Child Widgets

18. Column A widget that displays its children in a vertical array. To cause a child to expand to fill the available vertical space, wrap the child in an  Expanded  widget. The  Column  widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a   ListView . Column ( mainAxisAlignment : MainAxisAlignment .spaceEvenly , children : [ Image . asset ( 'images/pic1.jpg' ), Image . asset ( 'images/pic2.jpg' ), Image . asset ( 'images/pic3.jpg' ), ], ); setting the main axis alignment to  spaceEvenly  divides the free vertical space evenly between, above, and below each image.

19. Row ( mainAxisAlignment : MainAxisAlignment .spaceEvenly , children: [ Image . asset ( 'images/pic1.jpg' ), Image . asset ( 'images/pic2.jpg' ), Image . asset ( 'images/pic3.jpg' ), ], ); a Row widget to arrange widgets horizontally . Row setting the main axis alignment to  spaceEvenly   divides the free horizontal space evenly between, before, and after each image. Widgets can be sized to fit within a row or column by using the  Expanded  widget .  Row ( crossAxisAlignment : CrossAxisAlignment .center , children: [ Expanded ( child: Image . asset ( 'images/pic1.jpg' ), ),

20. ListView , a column-like widget, automatically provides scrolling when its content is too long for its render box. ListView ListView ( padding: const EdgeInsets.all (8), children : <Widget>[ Container( height: 50, color: Colors.amber [600], child: const Center(child: Text('Entry A')), ), Container( height: 50, color: Colors.amber [500], child: const Center(child: Text('Entry B')), ), Container( height: 50, color: Colors.amber [100], child: const Center(child: Text('Entry C')), ), ], )

21. Advanced Layout Application

22. import ' package:flutter / material.dart '; void main() => runApp ( MyApp ()); class MyApp extends StatelessWidget { // This widget is the root of your application. Widget build( BuildContext context) { return MaterialApp ( title: 'Flutter Demo', theme: ThemeData ( primarySwatch : Colors.blue ,), home: MyHomePage ( title: 'Product layout demo home page'), ); } } Advanced Layout Application

23. class MyHomePage extends StatelessWidget { MyHomePage ({Key key , this.title }) : super(key: key); final String title; @override Widget build( BuildContext context) { return Scaffold( appBar : AppBar (title: Text("Product Listing")), body: ListView ( padding: const EdgeInsets.fromLTRB (2.0, 10.0, 2.0, 10.0), children: [ Advanced Layout Application

24. ProductBox ( name: "iPhone", description: "iPhone is the stylist phone ever", price: 1000, image: "iphone.png"), ProductBox ( name: "Pixel", description: "Pixel is the most featureful phone ever", price: 800, image: "pixel.png"), ProductBox ( name: "Laptop", description: "Laptop is most productive development tool", price: 2000, image: "laptop.png"), ProductBox ( name: "Tablet", description: "Tablet is the most useful device ever for meeting", price: 1500, image: "tablet.png"), ProductBox ( name: " Pendrive ", description: " Pendrive is useful storage medium", price: 100, image: "pendrive.png"), ProductBox ( name: "Floppy Drive", description: "Floppy drive is useful rescue storage medium", price: 20, image: "floppy.png"), ], )); } } Advanced Layout Application

25. class ProductBox extends StatelessWidget { ProductBox ({Key key , this.name, this.description , this.price , this.image }) : super(key: key); final String name; final String description; final int price; final String image; Widget build( BuildContext context) { return Container( padding: EdgeInsets.all (2), height: 120, Advanced Layout Application

26. child: Card ( child: Row ( mainAxisAlignment : MainAxisAlignment.spaceEvenly , children: [ Image .asset ("assets/ appimages /" + image), Expanded ( child: Container ( padding: EdgeInsets.all (5), child: Column ( mainAxisAlignment : MainAxisAlignment.spaceEvenly , children: [ Text (this.name, style: TextStyle ( fontWeight : FontWeight.bold )), Text ( this.description ), Text ("Price: " + this.price.toString ()), ], ))) ]))); } } Advanced Layout Application

27. Homework

28. What are Gestures in flutter Topic to search