introductiontoflutter.pptx

Introduction to Flutter What is Flutter Open source UI Framework by Google Able to create iOS, Android and web application using Dart High performance, high fidelity, low latency, as it renders the Native UI. Use DART as main programming language Open source / github. About Dart Dart is a prog...

Introduction to Flutter What is Flutter Open source UI Framework by Google Able to create iOS, Android and web application using Dart High performance, high fidelity, low latency, as it renders the Native UI. Use DART as main programming language Open source / github. About Dart Dart is a programming language developed by Google Learning it isn’t hard if you have experience with Java or JavaScript. You will quickly get it. You can use dartpad as an online compiler of Dart https://dartpad.dev/ Who uses Flutter https://flutter.dev/showcase Setup your Editor https://flutter.dev/docs/get-started/editor You will need to configure an emulator after setting up the SDK. Online Editor (Demo purposes - no setup) https://codepen.io/pen/editor/flutter Everything is a widget You build widget upon widget. Your screen, a section in a screen, a tiny little section is also a Widget. You create and customize your own widget. Widget catalog https://flutter.dev/docs/development/ui/widgets The boilerplate code of an app - Scaffold Scaffold( appBar: AppBar( title: const Text('Sample Code'), ), body: Center(child: Text('Hello World')), floatingActionButton: FloatingActionButton( onPressed: () => {}, tooltip: 'Increment Counter', child: const Icon(Icons.add), ), ); Scaffold A scaffold is a basic structure of an application having the following property by default: appbar body floatingActionButton bottomNavigationBar drawer Appbar An app bar consists of a toolbar and potentially other widgets, For example, if you would like to add a button on the left side you use leading and actions on the right side. You may change the property backgroundColor to change the background color of the AppBar. Floating Action Button A floating action button is a circular icon floatingActionButton: FloatingActionButton( button that hovers over content to promote onPressed: () { a primary action in the application // Add your onPressed code here! }, child: Icon(Icons.navigation), backgroundColor: Colors.green, Body This is where you build the content of your application. Widgets for layouting We will discover the widgets that are used to position items within a page. Here are some important/main widgets: Container Center Column Row SingleChildScrollView Container A container is a box! You can specify the width, height, color, padding and margin. In the below example, EdgeInsets.all means all direction (top, bottom, left, right) Center( child: Container( margin: EdgeInsets.all(10.0), color: Colors.amber, width: 48.0, height: 48.0, padding:EdgeInsets.all(10.0) ), Center A widget that centers its child within itself. Center(child: Text('Hello World')), Row A widget that displays its children in a horizontal array. Row( children: [ Expanded( child: Text('Deliver features faster', textAlign: TextAlign.center), ), Expanded( child: Text('Craft beautiful UIs', textAlign: TextAlign.center), ), Expanded( child: FittedBox( fit: BoxFit.contain, child: const FlutterLogo(), Column A widget that displays its children in a vertical array. Column( children: [ Text('Deliver features faster'), Text('Craft beautiful UIs'), Expanded( child: FittedBox( fit: BoxFit.contain, child: const FlutterLogo(), ), ), ], ) SingleScrollView A box which allows a single widget to be scrolled. You will use this when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you need to make sure it can be scrolled if the container gets too small in one axis Visible widget in Flutter Once you know how to position items on a page, we will see some of the widgets that you can use in your application. Here are some important/main widgets: Text Image Button Icon Slider Text This widget is used to displays a text with Text( single style. 'Hello World', You might need to use TextStyle widget as textAlign: TextAlign.center, well with this widget to add styling to the style: TextStyle(fontWeight: FontWeight.bold, text, for example to add color, set to bold color:Colors.red), ), Image To show an image. You may show an image Image( from: image: Downloaded from a URL NetworkImage('https://flutter.github.io/assets-for-api -docs/assets/widgets/owl.jpg'), Stored locally in assets folder ) Icon As per its name, an icon is a widget that is Icon( predefined, and can be used directly within Icons.audiotrack, your application. color: Colors.green, You may refer to Icon documentation, to see size: 30.0, all available icon ready to be used in your ), application https://api.flutter.dev/flutter/material/Icons-class.html RaisedButton A raised button, follows Material RaisedButton( design principle is a button that child: Text('Color Changed'), raises slightly, configurable via color: Colors.green, elevation property. onPressed: () { print(“Hello World”)}, You will need to declare what ), should happen when the button is pressed via it’s onPress property. Other type of button includes FlatButton Slider A slider can be used to select Slider( value: _value.toDouble(), from either a continuous or a min: 1.0, max: 10.0, discrete set of values. onChanged: (double newValue) { setState(() { _value = newValue.round(); We will use onChanged property }); to update the value of item, once }, the value of slider changed. Stateless Widget class MyApp extends StatelessWidget { Stateless Widget is a widget that @override is immutable. Widget build(BuildContext context) Stateless widgets cannot change { return Container() their state during the runtime of } the app, which means the } widgets cannot be redrawn while the app is in action. Stateful Widget class MyWidget extends StatefulWidget { Stateful Widget is a widget that @override stores variable (state). _MyWidget createState() => _MyWidget(); This widget will rebuild itself } whenever there is a change of its class _MyWidget extends state (variable) State{ @override For example when user interact Widget build(BuildContext context) with a button, you might change { return Container(); the state/variable within the widget => Widget will be } refreshed. }