Session 2.pdf

y nl O se U tre Sessio...

y nl O se U tre Session 2 en C Applications and Widgets h ec in Flutter pt rA Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 1 of 15  Session Overview y nl Explain how to create a simple Flutter application in Android Studio O ❖ se ❖ Explain Widgets in Flutter and uses U ❖ List different types of widgets in Flutter tre ❖ List different types of layout Widgets en C h ec pt rA Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 2 of 15  Creating a Flutter Application y nl O Step 1: Open Android Studio. se U Step 2: Create Flutter project. tre en Step 3: Select Flutter application. C h Step 4: Configure the application. ec pt Step 5: Complete the project creation. rA Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 3 of 15  Components in Flutter y nl O se android U README.md ios tre en pubspec.lock lib Folders C h ec pubspec.yaml lib/main.dart pt rA.iml.packages Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 4 of 15  Main.dart File [1-4] y import 'package:flutter/material.dart'; nl void main() { O Code Snippet 1: runApp(const MyApp()); se } U class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); tre // This widget is the core of the application. en @override Widget build(BuildContext context) { C return MaterialApp( title: 'Flutter Demo', h theme: ThemeData( ec primarySwatch: Colors.blue, pt ), rA home: const MyHomePage(title: 'Flutter Demo Home Page'), ); Fo } } © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 5 of 15  Main.dart File [2-4] y nl O class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); se U final String title; tre @override State createState() => _MyHomePageState(); en } C class _MyHomePageState extends State { int _counter = 0; h ec void _incrementCounter() { pt setState(() { _counter++; rA }); } Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 6 of 15  Main.dart File [3-4] y nl Text( O '$_counter', se @override style:Theme.of(context).textTheme.headline4, U Widget build(BuildContext context) { ), return Scaffold( ], tre appBar: AppBar( ), title: Text(widget.title), ), en ), body: Center( floatingActionButton: FloatingActionButton( C child: Column( onPressed: _incrementCounter, mainAxisAlignment: MainAxisAlignment.center, tooltip: 'Increment', h children: [ child: const Icon(Icons.add), const Text( ec 'You have pushed the button this many times:', ), // This trailing comma is used to auto-format nicer for build pt ), methods. rA ); } Fo } © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 7 of 15  Main.dart File [4-4] y nl Android Studio Console: Output of Code Snippet 1: O se U tre en C h ec pt rA Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 8 of 15  Widgets in Flutter y nl Widget Group O Platform Specific Platform Independent se Android- ios-specific/Cupertino U specific/Material widgets tre widgets TabBarView en ListTile CupertinoTimerPicker C RaisedButton CupertinoNavigationBar FloatingActionButton CupertinoTabBar h Text (string, options) ec FlatButton CupertinoTabScaffold Image (source) IconButton CupertinoTabView pt Icon (icon_name) DropdownButton CupertinoTextField rA PopupMenuButton CupertinoDialog ButtonBar CupertinoDialogAction Fo TextField © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 9 of 15  State Maintenance Widgets y nl O Widgets se U tre StatelessWidget StatefulWidget en C h ec pt AssetImage Text Scrollable Checkbox rA Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 10 of 15  Stateless Widgets y nl Code Snippet 2: Widget Tree: O se U class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); tre final String title; @override en Widget build(BuildContext context) { C return Scaffold( appBar: AppBar(title: Text(this.title), ), h body: Center(child: Text( ‘Hello World’,), ), ec pt ); } rA } Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 11 of 15  Layout Widgets [1-3] y nl Single-child Layout Widgets O se U CustomSingleChi Align Center tre ldLayout en C AspectRatio ConstrainedBox Expanded h ec pt rA Baseline Container FittedBox Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 12 of 15  Layout Widgets [2-3] y nl Single-child Layout Widgets O se Fractionall SizedOverf U SizedBox ySizedBox lowBox tre en IntrinsicHe Padding Transform ight C h IntrinsicWi dth ec LimitedBox pt rA OverflowBox offstage Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 13 of 15  Layout Widgets [3-3] y nl Multi-child Layout Widgets O se U Column ListView Row tre en CustomMultiChil Stack ListBody dLayout C h Flow ec GridView Table pt rA LayoutBuilder IndexedStack Wrap Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 14 of 15  Summary y nl O ❖ It generates many files and folders when a new Flutter project is created. se ❖ The pubspec.yaml file contains all information about dependencies, assets, fonts, and U so on. tre ❖ MyApp is the core widget of the Application. en ❖ In Flutter application, everything is a widget. It can be of any type based on usage. C ❖ State management widgets are classified into two types - Stateful and Stateless h Widgets. ec ❖ Layout widgets are classified into two types - Single-child Layout Widgets and Multi- pt rA child Layout Widgets. It is classified on the basis of the child it has. Fo © Aptech Limited Application Development Using Flutter and Dart/ Session 2 / 15 of 15