Flutter App Development Lecture Notes 7 (PDF)

University of Human Development College of Science and Technology Department of IT and CS Fall-2024 Semester 7 Mobile Technologies Lectuer-7 By: Hiwa Omer Hassan [email protected]...

University of Human Development College of Science and Technology Department of IT and CS Fall-2024 Semester 7 Mobile Technologies Lectuer-7 By: Hiwa Omer Hassan [email protected] What’s for vSplash Screen vStack Layout Today? vAlert Dialog  1. Splash Screen 3  Splash Screen 4  Splash Screen v A splash screen is a launch screen, start screen, or boot screen, which is a graphical control element containing the ü Image, ü Logo, and 1.PNG ü Current version of the software. v It is the first screen of the app that displays whenever the application is loading. v It can also be the app's welcome screen that provides a simple initial experience when a mobile game or program is launching. 5  Splash Screen Characteristics Ø It is mainly used for branding or identity recognition of the application and puts the branding impression to users. Ø It can also be used to show some loading progress indicator while the hardware is loading to present software to the user. Ø When the loading of the splash screen completes, the user gets another functional screen that would be home screen or dashboard. 6  Splash Screen Class 7  Giving timer to initState() 8  Output 9  2. Flutter Stack 10  Flutter Stack 11  Flutter Stack v Stack is a widget in Flutter that contains a list of widgets and positions them on top of the other. v In other words, the stack allows developers to overlap multiple widgets into a single screen and renders them from bottom to top. v The first widget is the bottommost item, and the last widget is the topmost item 12  Flutter Stack Key Points üThe child widget in a stack can be either positioned or non- positioned. üPositioned items are wrapped in Positioned widget and must have a one non-null property üThe non-positioned child widgets are aligned itself. It displays on the screen based on the stack's alignment. The default position of the children is in the top left corner. üWe can use the alignment attribute to change the alignment of the widgets. 13  Flutter Stack Key Points üStack places the children widgets in order with the first child being at the bottom and the last child being at the top. üIf we want to reorder the children's widget, it is required to rebuild the stack in the new order. üBy default, the first widget of each stack has the maximum size compared to other widgets. 14  Stack Properties 15  Stack Properties 16  Stack Properties 17  Stack Example.1 18  Stack Example.2 child: Center( child: Stack( children: [ Positioned( left: 100, top: 50, child: Container( decoration: BoxDecoration( color: Colors.amber, borderRadius: BorderRadius.circular(10)), constraints: BoxConstraints(maxHeight: 150, maxWidth: 250), ), 19  Adding Image and Text in to Stack Positioned( top: 50, left: 50, child: Image.network( '), 'https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png width: 130, height: 130, ), Positioned( top: 70, left: 150, child: Text( 'Real Madrid', style: TextStyle(fontSize: 30, color: Colors.white), ), ), 20  Adding an Icon and a Text in to Stack Positioned( top: 110, left: 170, child: Text( 'Greatest Club of all time', style: TextStyle(fontSize: 15, color: Colors.white), ), ), Positioned( top: 140, left: 170, child: Row( children: [ Icon(Icons.sports_soccer), Text('13 Champions league') ], )) 21  3. Alert Dialog 22  Alert Dialog q An alert dialog is a useful feature that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. q It is a pop-up box that appears at the top of the app content and the middle of the screen. q It can be dismissed manually by the user before resuming interaction with the app. 23  Alert Dialog Types 1.Basic AlertDialog 2.Confirmation AlertDialog 3.Select AlertDialog 4.TextField AlertDialog 24  Alert Dialog Example 25  Output 26 Thank You Questions? 27