├── 01-hello-flutter └── main.dart ├── 02-stateless-widgets └── main.dart ├── 03-buttons-and-stateful-widgets └── main.dart ├── 04-basic-navigation-and-routes ├── 01-simple-routes-using-stateless-widget │ └── lib │ │ └── main.dart └── 02-routes-using-stateful-widget │ └── lib │ └── main.dart ├── 05-using-onChanged-to-show-input-text └── main.dart ├── 06-using-onSubmitted-to-show-input-text-after-submit └── main.dart ├── 07-adding-deleting-text-in-textfield └── main.dart ├── 08-tab-navigation ├── FirstPage.dart ├── SecondPage.dart ├── ThirdPage.dart └── main.dart ├── 09-http-requests-and-restapi └── main.dart ├── 10-listview-with-json-or-listdata └── main.dart ├── 11-sliding-menu-using-a-drawer ├── 01-simple-drawer │ ├── main.dart │ └── pages │ │ ├── home_page.dart │ │ └── other_page.dart └── 02-drawer-using-variables │ └── lib │ └── main.dart ├── 12-animations ├── loader.dart └── main.dart ├── 13-json-storage ├── main.dart └── pubspec.yaml ├── 14-friendlychatapp └── main.dart ├── 15-changing-icon-color-onfocus └── main.dart ├── 16-horizontal-listview-and-tabs └── main.dart ├── 17-raised-button └── main.dart ├── 18-raised-button-with-parameters └── main.dart ├── 19-flat-button └── main.dart ├── 20-icon-button └── main.dart ├── 21-updating-data-in-textfields └── main.dart ├── 22-checkbox └── main.dart ├── 23-radios-with-functions └── main.dart ├── 24-switches └── main.dart ├── 25-slider └── main.dart ├── 26-datepicker └── main.dart ├── 27-appBar └── main.dart ├── 28-floating-action-button └── main.dart ├── 29-drawer-which-shows-togglemenu └── main.dart ├── 30-footer-buttons └── main.dart ├── 31-BottomNavigationBar └── main.dart ├── 32-using-bottomsheets └── main.dart ├── 33-using-snackBars └── main.dart ├── 34-alert-dialog └── main.dart ├── 35-simple-dialog └── main.dart ├── 36-rows-and-columns └── main.dart ├── 37-using-cards └── main.dart ├── 38-using-Expanded ├── images │ └── flutter.png ├── main.dart └── pubspec.yaml ├── 39-Listview-builder-using-dart-maps └── main.dart ├── 40-Listview-builder-using-dart-lists └── main.dart ├── 41-coffee-central-app ├── images │ ├── breakfast.jpg │ ├── drinks.jpg │ ├── flutter.png │ ├── food.jpg │ └── lunch.jpg ├── lib │ ├── main.dart │ └── screens │ │ ├── foodmenu_selected.dart │ │ └── home.dart ├── main.dart └── pubspec.yaml ├── 42-using-custom-widgets └── lib │ ├── main.dart │ └── widgets.dart ├── 43-using-image-assets ├── assets │ ├── 2.0x │ │ └── explore.png │ └── explore.png ├── lib │ ├── main.dart │ └── widgets.dart └── pubspec.yaml ├── 44-Listview-builder-with-refreshIndicator └── lib │ ├── main.dart │ └── models.dart ├── 45-using-tooltips └── lib │ └── main.dart ├── 46-using-chips-keys-and-children └── lib │ └── main.dart ├── 47-wp-flutter-app ├── lib │ └── main.dart └── pubspec.yaml ├── 48-sliders-and-indicators └── lib │ └── main.dart ├── 49-popupmenu-button └── lib │ └── main.dart ├── 50-timer-with-linearprogressbar └── lib │ └── main.dart ├── 51-ExpansionPanel ├── 7677380631459189069.png └── lib │ └── main.dart ├── 52-TabBarView ├── 4531018689106172362.png └── lib │ └── main.dart ├── 53-Timeline-using-Stepper └── lib │ └── main.dart ├── 54-GridView └── lib │ └── main.dart ├── 55-Timeline-using-Stepper-with-TextField └── lib │ └── main.dart ├── 56-charts ├── lib │ └── main.dart └── pubspec.yaml ├── 57-grouping-charts-data ├── lib │ └── main.dart └── pubspec.yaml ├── 58-pie-charts ├── lib │ └── main.dart └── pubspec.yaml ├── 59-custom-widgets-using-stateful └── lib │ ├── main.dart │ └── mywidget.dart ├── 59-custom-widgets-using-stateless └── lib │ ├── clock.dart │ └── main.dart ├── 60-widgets-within-widgets ├── 861017788426072585.png └── lib │ ├── TimeCounter.dart │ ├── main.dart │ └── timedisplay.dart ├── 61-child-to-parent ├── 639017783384305142.png └── lib │ ├── authenticator.dart │ └── main.dart ├── 62-pushNamed └── lib │ ├── main.dart │ └── screens │ ├── home.dart │ ├── second.dart │ └── third.dart ├── 63-pushNamedUntilAndRemove └── lib │ ├── main.dart │ └── screens │ ├── home.dart │ ├── second.dart │ └── third.dart ├── 64-push-and-pop └── lib │ ├── main.dart │ └── screens │ ├── home.dart │ ├── second.dart │ └── third.dart ├── 65-navigating-from-a-child-widget └── lib │ ├── main.dart │ ├── mywidget.dart │ └── screens │ ├── home.dart │ ├── second.dart │ └── third.dart ├── 66-global-state └── lib │ ├── code │ └── GlobalState.dart │ ├── main.dart │ └── screens │ ├── home.dart │ └── second.dart ├── 67-passing-variables └── lib │ ├── main.dart │ └── screens │ ├── home.dart │ └── second.dart ├── 68-redux ├── lib │ ├── main.dart │ └── screens │ │ ├── home.dart │ │ └── second.dart └── pubspec.yaml ├── 69-opacity └── lib │ └── main.dart ├── 70-rotated-box └── lib │ └── main.dart ├── 71-box-decoration ├── images │ └── smile.png ├── lib │ └── main.dart └── pubspec.yaml ├── 72-transformations └── lib │ └── main.dart ├── 73-custompainter └── lib │ └── main.dart ├── 74-tween-animations └── lib │ └── main.dart ├── 75-animation-builder └── lib │ └── main.dart ├── 76-listener └── lib │ └── main.dart ├── 77-animated-widgets └── lib │ └── main.dart ├── 78-display-a-map ├── 7145080177470288259.png ├── lib │ └── main.dart └── pubspec.yaml ├── 79-markers ├── 7642140318154827808.png ├── lib │ └── main.dart └── pubspec.yaml ├── 80-map-interactions ├── 9139680657493291099.png ├── lib │ └── main.dart └── pubspec.yaml ├── 81-polylines ├── 4970065838305236445.png ├── lib │ └── main.dart └── pubspec.yaml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE └── README.md /01-hello-flutter/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State{ 15 | @override 16 | Widget build(BuildContext context) { 17 | return new Scaffold( 18 | appBar: new AppBar( 19 | title: new Text('Name here'), 20 | ), 21 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 22 | body: new Container( 23 | padding: new EdgeInsets.all(32.0), 24 | child: new Center( 25 | child: new Column( 26 | children: [ 27 | new Text('Hello world!') 28 | ], 29 | ), 30 | ), 31 | ), 32 | ); 33 | } 34 | } -------------------------------------------------------------------------------- /02-stateless-widgets/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | //home: new Text("Cool") 6 | home: new MyStatelessWidget() 7 | )); 8 | } 9 | 10 | class MyStatelessWidget extends StatelessWidget { 11 | @override 12 | Widget build(BuildContext context){ 13 | //Scaffold provide functionality of appbar, body of app etc 14 | return new Scaffold( 15 | appBar: new AppBar(title: new Text("Stateless Widget")), 16 | body: new Container( 17 | //adding padding around card 18 | padding: new EdgeInsets.all(20.0), 19 | child: new Column( 20 | crossAxisAlignment: CrossAxisAlignment.stretch, 21 | children: [ 22 | // new Text("Hey"), 23 | // new Text("My name"), 24 | // new Text("Is Raunak") 25 | 26 | new MyCard( 27 | title: new Text("I love Flutter", style: new TextStyle(fontSize: 20.0)), 28 | icon: new Icon(Icons.favorite, size: 40.0, color: Colors.redAccent) 29 | ), 30 | new MyCard( 31 | title: new Text("I love Donuts", style: new TextStyle(fontSize: 20.0)), 32 | icon: new Icon(Icons.donut_large, size: 40.0, color: Colors.brown) 33 | ), 34 | new MyCard( 35 | title: new Text("I see you", style: new TextStyle(fontSize: 20.0)), 36 | icon: new Icon(Icons.visibility, size: 40.0, color: Colors.blue) 37 | ) 38 | ] 39 | ) 40 | ) 41 | ); 42 | } 43 | } 44 | 45 | class MyCard extends StatelessWidget { 46 | //adding constructor 47 | MyCard({this.title, this.icon}); 48 | 49 | final Widget title; 50 | final Widget icon; 51 | 52 | @override 53 | Widget build(BuildContext context){ 54 | return new Container( 55 | //adding bottom padding on card 56 | padding: new EdgeInsets.only(bottom: 20.0), 57 | child: new Card( 58 | child: new Container( 59 | //adding padding inside card 60 | padding: new EdgeInsets.all(15.0), 61 | child: new Column( 62 | children: [ 63 | // new Text("I love Flutter"), 64 | // new Icon(Icons.favorite) 65 | 66 | this.title, 67 | this.icon 68 | ] 69 | ) 70 | ) 71 | 72 | ) 73 | ); 74 | } 75 | } -------------------------------------------------------------------------------- /03-buttons-and-stateful-widgets/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new AwesomeButton() 6 | )); 7 | } 8 | 9 | class AwesomeButton extends StatefulWidget { 10 | @override 11 | AwesomeButtonState createState() => new AwesomeButtonState(); 12 | } 13 | 14 | class AwesomeButtonState extends State { 15 | 16 | int counter = 0; 17 | List strings = ["Flutter", "Is", "Awesome"]; 18 | String displayedString = ""; 19 | 20 | //you can also declare variables like this 21 | // var counter = 0; 22 | // var strings = ["Flutter", "Is", "Awesome"]; 23 | 24 | void onPressed(){ 25 | setState(() { 26 | displayedString = strings[counter]; 27 | counter = counter < 2 ? counter+1 : 0; 28 | }); 29 | } 30 | 31 | @override 32 | Widget build(BuildContext context){ 33 | return new Scaffold( 34 | appBar: new AppBar(title: new Text("Stateful Widget!"), backgroundColor: Colors.deepOrange), 35 | body: new Container( 36 | child: new Center( 37 | child: new Column( 38 | mainAxisAlignment: MainAxisAlignment.center, 39 | children: [ 40 | new Text(displayedString, style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold)), 41 | new Padding(padding: new EdgeInsets.all(15.0)), 42 | new RaisedButton( 43 | child: new Text("Press me!", style: new TextStyle(color: Colors.white, fontStyle: FontStyle.italic, fontSize: 20.0)), 44 | color: Colors.red, 45 | onPressed: onPressed 46 | ) 47 | ] 48 | ) 49 | ) 50 | ) 51 | ); 52 | } 53 | } -------------------------------------------------------------------------------- /04-basic-navigation-and-routes/01-simple-routes-using-stateless-widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new HomePage(), 6 | routes: { 7 | "/SecondPage": (BuildContext context) => new SecondPage() 8 | } 9 | )); 10 | } 11 | 12 | class HomePage extends StatelessWidget { 13 | @override 14 | Widget build(BuildContext context){ 15 | return new Scaffold( 16 | appBar: new AppBar(title: new Text("Home Page"), backgroundColor: Colors.deepOrange), 17 | body: new Container( 18 | child: new Center( 19 | child: new Column( 20 | mainAxisAlignment: MainAxisAlignment.center, 21 | children: [ 22 | new IconButton( 23 | icon: new Icon(Icons.favorite, color: Colors.redAccent), 24 | iconSize: 70.0, 25 | onPressed: () {Navigator.of(context).pushNamed("/SecondPage");} 26 | ), 27 | new Text("Home") 28 | ] 29 | ) 30 | ) 31 | ) 32 | ); 33 | } 34 | } 35 | 36 | class SecondPage extends StatelessWidget { 37 | @override 38 | Widget build(BuildContext context){ 39 | return new Scaffold( 40 | appBar: new AppBar(title: new Text("Second Page"), backgroundColor: Colors.deepOrange), 41 | body: new Container( 42 | child: new Center( 43 | child: new Column( 44 | mainAxisAlignment: MainAxisAlignment.center, 45 | children: [ 46 | new IconButton( 47 | icon: new Icon(Icons.home, color: Colors.blue), 48 | iconSize: 70.0, 49 | onPressed: null, 50 | ), 51 | new Text("Second Page") 52 | ] 53 | ) 54 | ) 55 | ) 56 | ); 57 | } 58 | } -------------------------------------------------------------------------------- /04-basic-navigation-and-routes/02-routes-using-stateful-widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(new MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | var routes = { 9 | MyItemsPage.routeName: (BuildContext context) => new MyItemsPage(title: "MyItemsPage"), 10 | }; 11 | return new MaterialApp( 12 | title: 'Flutter Demo', 13 | theme: new ThemeData( 14 | primarySwatch: Colors.blue, 15 | ), 16 | home: new MyHomePage(title: 'Flutter Demo Home Page'), 17 | routes: routes, 18 | ); 19 | } 20 | } 21 | 22 | class MyHomePage extends StatefulWidget { 23 | MyHomePage({Key key, this.title}) : super(key: key); 24 | 25 | final String title; 26 | 27 | @override 28 | _MyHomePageState createState() => new _MyHomePageState(); 29 | } 30 | 31 | class _MyHomePageState extends State { 32 | int _counter = 0; 33 | 34 | void _incrementCounter() { 35 | Navigator.pushNamed(context, MyItemsPage.routeName); 36 | } 37 | 38 | @override 39 | Widget build(BuildContext context) { 40 | var button = new IconButton(icon: new Icon(Icons.access_alarm), onPressed: _onButtonPressed); 41 | return new Scaffold( 42 | appBar: new AppBar( 43 | title: new Text(widget.title), 44 | ), 45 | body: new Column( 46 | children: [ 47 | new Text('Dog'), 48 | new Text('Cat'), 49 | button 50 | ], 51 | ), 52 | floatingActionButton: new FloatingActionButton( 53 | onPressed: _incrementCounter, 54 | tooltip: 'Increment', 55 | child: new Icon(Icons.add), 56 | ), 57 | ); 58 | } 59 | 60 | void _onButtonPressed() { 61 | Navigator.pushNamed(context, MyItemsPage.routeName); 62 | } 63 | } 64 | 65 | class MyItemsPage extends StatefulWidget { 66 | MyItemsPage({Key key, this.title}) : super(key: key); 67 | 68 | static const String routeName = "/MyItemsPage"; 69 | 70 | final String title; 71 | 72 | @override 73 | _MyItemsPageState createState() => new _MyItemsPageState(); 74 | } 75 | 76 | /// // 1. After the page has been created, register it with the app routes 77 | /// routes: { 78 | /// MyItemsPage.routeName: (BuildContext context) => new MyItemsPage(title: "MyItemsPage"), 79 | /// }, 80 | /// 81 | /// // 2. Then this could be used to navigate to the page. 82 | /// Navigator.pushNamed(context, MyItemsPage.routeName); 83 | /// 84 | 85 | class _MyItemsPageState extends State { 86 | @override 87 | Widget build(BuildContext context) { 88 | var button = new IconButton(icon: new Icon(Icons.arrow_back), onPressed: _onButtonPressed); 89 | return new Scaffold( 90 | appBar: new AppBar( 91 | title: new Text(widget.title), 92 | ), 93 | body: new Container( 94 | child: new Column( 95 | children: [ 96 | new Text('Item1'), 97 | new Text('Item2'), 98 | button 99 | ], 100 | ), 101 | ), 102 | floatingActionButton: new FloatingActionButton( 103 | onPressed: _onFloatingActionButtonPressed, 104 | tooltip: 'Add', 105 | child: new Icon(Icons.add), 106 | ), 107 | ); 108 | } 109 | 110 | void _onFloatingActionButtonPressed() { 111 | } 112 | 113 | void _onButtonPressed() { 114 | Navigator.pop(context); 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /05-using-onChanged-to-show-input-text/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyTextInput() 6 | )); 7 | } 8 | 9 | class MyTextInput extends StatefulWidget { 10 | @override 11 | MyTextInputState createState() => new MyTextInputState(); 12 | } 13 | 14 | class MyTextInputState extends State{ 15 | 16 | String result = ""; 17 | 18 | @override 19 | Widget build(BuildContext context){ 20 | return new Scaffold( 21 | appBar: new AppBar(title: new Text("Input Text"), backgroundColor: Colors.deepOrange), 22 | body: new Container( 23 | child: new Center( 24 | child: new Column( 25 | mainAxisAlignment: MainAxisAlignment.center, 26 | children: [ 27 | new TextField( 28 | decoration: new InputDecoration( 29 | hintText: "Type in here" 30 | ), 31 | //onChanged is called whenever we add or delete something on Text Field 32 | onChanged: (String str){ 33 | setState((){ 34 | result = str; 35 | }); 36 | } 37 | ), 38 | //displaying input text 39 | new Text(result) 40 | ] 41 | ) 42 | ) 43 | ) 44 | ); 45 | } 46 | } -------------------------------------------------------------------------------- /06-using-onSubmitted-to-show-input-text-after-submit/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyTextInput() 6 | )); 7 | } 8 | 9 | class MyTextInput extends StatefulWidget { 10 | @override 11 | MyTextInputState createState() => new MyTextInputState(); 12 | } 13 | 14 | class MyTextInputState extends State{ 15 | 16 | String result = ""; 17 | 18 | @override 19 | Widget build(BuildContext context){ 20 | return new Scaffold( 21 | appBar: new AppBar(title: new Text("Input Text"), backgroundColor: Colors.deepOrange), 22 | body: new Container( 23 | child: new Center( 24 | child: new Column( 25 | mainAxisAlignment: MainAxisAlignment.center, 26 | children: [ 27 | new TextField( 28 | decoration: new InputDecoration( 29 | hintText: "Type in here" 30 | ), 31 | //onChanged is called whenever we add or delete something on Text Field 32 | onSubmitted: (String str){ 33 | setState((){ 34 | result = str; 35 | }); 36 | } 37 | ), 38 | //displaying input text 39 | new Text(result) 40 | ] 41 | ) 42 | ) 43 | ) 44 | ); 45 | } 46 | } -------------------------------------------------------------------------------- /07-adding-deleting-text-in-textfield/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyTextInput() 6 | )); 7 | } 8 | 9 | class MyTextInput extends StatefulWidget { 10 | @override 11 | MyTextInputState createState() => new MyTextInputState(); 12 | } 13 | 14 | class MyTextInputState extends State{ 15 | 16 | final TextEditingController controller = new TextEditingController(); 17 | 18 | String result = ""; 19 | 20 | @override 21 | Widget build(BuildContext context){ 22 | return new Scaffold( 23 | appBar: new AppBar(title: new Text("Input Text"), backgroundColor: Colors.deepOrange), 24 | body: new Container( 25 | child: new Center( 26 | child: new Column( 27 | mainAxisAlignment: MainAxisAlignment.center, 28 | children: [ 29 | new TextField( 30 | decoration: new InputDecoration( 31 | hintText: "Type in here" 32 | ), 33 | //onChanged is called whenever we add or delete something on Text Field 34 | onSubmitted: (String str){ 35 | setState((){ 36 | result = result + '\n' + str; 37 | }); 38 | controller.text = ""; 39 | }, 40 | controller: controller 41 | ), 42 | //displaying input text 43 | new Text(result) 44 | ] 45 | ) 46 | ) 47 | ) 48 | ); 49 | } 50 | } -------------------------------------------------------------------------------- /08-tab-navigation/FirstPage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class First extends StatelessWidget { 4 | 5 | @override 6 | Widget build(BuildContext context){ 7 | return new Container( 8 | child: new Center( 9 | child: new Icon(Icons.accessibility_new, size: 150.0, color: Colors.brown) 10 | ) 11 | ); 12 | } 13 | } -------------------------------------------------------------------------------- /08-tab-navigation/SecondPage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatelessWidget { 4 | 5 | @override 6 | Widget build(BuildContext context){ 7 | return new Container( 8 | child: new Center( 9 | child: new Icon(Icons.favorite, size: 150.0, color: Colors.red) 10 | ) 11 | ); 12 | } 13 | } -------------------------------------------------------------------------------- /08-tab-navigation/ThirdPage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Third extends StatelessWidget { 4 | 5 | @override 6 | Widget build(BuildContext context){ 7 | return new Container( 8 | child: new Center( 9 | child: new Icon(Icons.local_pizza, size: 150.0, color: Colors.teal) 10 | ) 11 | ); 12 | } 13 | } -------------------------------------------------------------------------------- /08-tab-navigation/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './FirstPage.dart' as first; 3 | import './SecondPage.dart' as second; 4 | import './ThirdPage.dart' as third; 5 | 6 | void main() { 7 | runApp(new MaterialApp( 8 | home: new MyTabs() 9 | )); 10 | } 11 | 12 | class MyTabs extends StatefulWidget{ 13 | @override 14 | MyTabsState createState() => new MyTabsState(); 15 | } 16 | 17 | class MyTabsState extends State with SingleTickerProviderStateMixin{ 18 | 19 | TabController controller; 20 | 21 | @override 22 | void initState(){ 23 | super.initState(); 24 | controller = new TabController(vsync: this, length: 3); 25 | } 26 | 27 | @override 28 | void dispose(){ 29 | controller.dispose(); 30 | super.dispose(); 31 | } 32 | 33 | @override 34 | Widget build(BuildContext context){ 35 | return new Scaffold( 36 | appBar: new AppBar(title: new Text("Pages"), backgroundColor: Colors.deepOrange, 37 | bottom: new TabBar( 38 | controller: controller, 39 | tabs: [ 40 | new Tab(icon: new Icon(Icons.arrow_forward)), 41 | new Tab(icon: new Icon(Icons.arrow_downward)), 42 | new Tab(icon: new Icon(Icons.arrow_back)) 43 | ] 44 | ) 45 | ), 46 | bottomNavigationBar: new Material( 47 | color: Colors.deepOrange, 48 | child: new TabBar( 49 | controller: controller, 50 | tabs: [ 51 | new Tab(icon: new Icon(Icons.arrow_forward)), 52 | new Tab(icon: new Icon(Icons.arrow_downward)), 53 | new Tab(icon: new Icon(Icons.arrow_back)) 54 | ] 55 | ) 56 | ), 57 | body: new TabBarView( 58 | controller: controller, 59 | children: [ 60 | new first.First(), 61 | new second.Second(), 62 | new third.Third() 63 | ] 64 | ) 65 | ); 66 | } 67 | } -------------------------------------------------------------------------------- /09-http-requests-and-restapi/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'dart:convert'; //it allows us to convert our json to a list 3 | 4 | import 'package:flutter/material.dart'; 5 | import 'package:http/http.dart' as http; 6 | 7 | void main() { 8 | runApp(new MaterialApp( 9 | home: new HomePage() 10 | )); 11 | } 12 | 13 | class HomePage extends StatefulWidget { 14 | @override 15 | HomePageState createState() => new HomePageState(); 16 | } 17 | 18 | class HomePageState extends State { 19 | 20 | //this async func will get data from the internet 21 | //when our func is done we return a string 22 | Future getData() async { 23 | //we have to wait to get the data so we use 'await' 24 | http.Response response = await http.get( 25 | //Uri.encodeFull removes all the dashes or extra characters present in our Uri 26 | Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"), 27 | headers: { 28 | //if your api require key then pass your key here as well e.g "key": "my-long-key" 29 | "Accept": "application/json" 30 | } 31 | ); 32 | 33 | //print(response.body); 34 | 35 | List data = json.decode(response.body); 36 | //print(data); 37 | print(data[1]["title"]); // it will print => title: "qui est esse" 38 | } 39 | 40 | @override 41 | Widget build(BuildContext context){ 42 | return new Scaffold( 43 | appBar: new AppBar(title: new Text("Stateful Widget!"), backgroundColor: Colors.deepOrange), 44 | body: new Center( 45 | child: new RaisedButton( 46 | child: new Text("Get data!", style: new TextStyle(color: Colors.white, fontStyle: FontStyle.italic, fontSize: 20.0)), 47 | onPressed: getData 48 | ) 49 | ) 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /10-listview-with-json-or-listdata/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | import 'dart:convert'; 3 | 4 | import 'package:flutter/material.dart'; 5 | import 'package:http/http.dart' as http; 6 | 7 | void main() { 8 | runApp(new MaterialApp( 9 | home: new HomePage() 10 | )); 11 | } 12 | 13 | class HomePage extends StatefulWidget { 14 | @override 15 | HomePageState createState() => new HomePageState(); 16 | } 17 | 18 | class HomePageState extends State { 19 | 20 | List data; 21 | 22 | Future getData() async { 23 | var response = await http.get( 24 | Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"), 25 | headers: { 26 | "Accept": "application/json" 27 | } 28 | ); 29 | 30 | this.setState(() { 31 | data = json.decode(response.body); 32 | }); 33 | 34 | print(data[1]["title"]); 35 | 36 | return "Success!"; 37 | } 38 | 39 | @override 40 | void initState(){ 41 | this.getData(); 42 | } 43 | 44 | @override 45 | Widget build(BuildContext context){ 46 | return new Scaffold( 47 | appBar: new AppBar(title: new Text("Listviews"), backgroundColor: Colors.blue), 48 | body: new ListView.builder( 49 | itemCount: data == null ? 0 : data.length, 50 | itemBuilder: (BuildContext context, int index){ 51 | return new Card( 52 | child: new Text(data[index]["title"]), 53 | ); 54 | }, 55 | ), 56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /11-sliding-menu-using-a-drawer/01-simple-drawer/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import './pages/home_page.dart'; 4 | 5 | void main() { 6 | runApp(new MaterialApp( 7 | home: new HomePage() 8 | )); 9 | } 10 | 11 | -------------------------------------------------------------------------------- /11-sliding-menu-using-a-drawer/01-simple-drawer/pages/other_page.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class OtherPage extends StatelessWidget{ 4 | 5 | final String pageText; 6 | 7 | OtherPage(this.pageText); 8 | 9 | @override 10 | Widget build(BuildContext context){ 11 | return new Scaffold( 12 | appBar: new AppBar(title: new Text(pageText)), 13 | body: new Center( 14 | child: new Text(pageText), 15 | ), 16 | ); 17 | } 18 | } -------------------------------------------------------------------------------- /11-sliding-menu-using-a-drawer/02-drawer-using-variables/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MyApp()); 5 | } 6 | 7 | class SandyShores extends StatelessWidget{ 8 | 9 | static String routeName = "sandyShores"; 10 | 11 | @override 12 | Widget build(BuildContext context) { 13 | return new Center( 14 | child: new Text("You've landed on the Sandy Shores!"), 15 | ); 16 | } 17 | 18 | } 19 | 20 | class MyApp extends StatelessWidget{ 21 | @override 22 | Widget build(BuildContext context) { 23 | var routes = { 24 | SandyShores.routeName: (BuildContext context) => new SandyShores(), 25 | }; 26 | 27 | return new MaterialApp( 28 | title: 'Flutter Demo', 29 | home: new MyHomePage(title: 'Flutter Demo Homepage'), 30 | routes: routes, 31 | ); 32 | } 33 | 34 | } 35 | 36 | class MyHomePage extends StatefulWidget { 37 | MyHomePage({Key key, this.title}) : super(key: key); 38 | 39 | final String title; 40 | 41 | @override 42 | _MyHomePageState createState() => new _MyHomePageState(); 43 | } 44 | 45 | class _MyHomePageState extends State{ 46 | @override 47 | Widget build(BuildContext context) { 48 | 49 | var headerText = new Text('Headers'); 50 | 51 | var header = new DrawerHeader(child: headerText); 52 | 53 | var item1Text = new Text('Sandy Shores'); 54 | 55 | var item1Icon = new Icon(Icons.settings); 56 | 57 | var item1 = new ListTile( 58 | title: item1Text, leading: item1Icon, onTap: _onItem1OnTap); 59 | 60 | var children = [header, item1]; 61 | 62 | var listView = new ListView(children: children); 63 | 64 | var drawer = new Drawer(child: listView); 65 | 66 | return new Scaffold( 67 | drawer: drawer, 68 | appBar: new AppBar( 69 | title: new Text('Tabs Demo'), 70 | ), 71 | body: new Center( 72 | child: new Text(''), 73 | ), 74 | ); 75 | 76 | } 77 | 78 | void _onItem1OnTap() { 79 | Navigator.popAndPushNamed(context, SandyShores.routeName); 80 | } 81 | } -------------------------------------------------------------------------------- /12-animations/loader.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Loader extends StatefulWidget{ 4 | @override 5 | State createState() => new LoaderState(); 6 | } 7 | 8 | class LoaderState extends State with SingleTickerProviderStateMixin{ 9 | 10 | AnimationController controller; 11 | Animation animation; 12 | 13 | @override 14 | void initState(){ 15 | super.initState(); 16 | //vsync make sure that no unecessary resource are used by our device 17 | controller = new AnimationController(duration: new Duration(microseconds: 800), vsync: this); 18 | //curve is used to define how our animation behaves 19 | animation = new CurvedAnimation(parent: controller, curve: Curves.bounceOut); 20 | animation.addListener((){ 21 | //we call setState everytime when the animation value changes 22 | this.setState(() {}); 23 | }); 24 | animation.addStatusListener((AnimationStatus status){ 25 | }); 26 | /*to start the animation we use this but it shows animation 27 | only once i.e you have to restart app again n again*/ 28 | 29 | //controller.forward(); / 30 | 31 | //use controller.repeat() to repeat your animation 32 | controller.repeat(); 33 | } 34 | 35 | @override 36 | void dispose(){ 37 | controller.dispose(); 38 | super.dispose(); 39 | } 40 | 41 | @override 42 | Widget build(BuildContext context) { 43 | return new Column( 44 | mainAxisAlignment: MainAxisAlignment.center, 45 | children: [ 46 | new Container( 47 | color: Colors.white, 48 | height: 3.0, 49 | width: animation.value * 100.0, //animation.value ranges from 0 to 1 50 | ), 51 | new Padding(padding: new EdgeInsets.only(bottom: 5.0)), 52 | new Container( 53 | color: Colors.white, 54 | height: 3.0, 55 | width: animation.value * 75.0, //animation.value ranges from 0 to 1 56 | ), 57 | new Padding(padding: new EdgeInsets.only(bottom: 5.0)), 58 | new Container( 59 | color: Colors.white, 60 | height: 3.0, 61 | width: animation.value * 50.0, //animation.value ranges from 0 to 1 62 | ), 63 | ], 64 | ); 65 | } 66 | } -------------------------------------------------------------------------------- /12-animations/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import './loader.dart'; 4 | 5 | void main(){ 6 | runApp( 7 | new MaterialApp( 8 | home: new Home() 9 | ) 10 | ); 11 | } 12 | 13 | class Home extends StatelessWidget { 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | return new Scaffold( 18 | backgroundColor: Colors.blueAccent, 19 | body: new Center( 20 | child: new Loader() 21 | ), 22 | ); 23 | } 24 | } -------------------------------------------------------------------------------- /13-json-storage/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:io'; 3 | import 'dart:convert'; //to convert json to maps and vice versa 4 | import 'package:path_provider/path_provider.dart'; //add path provider dart plugin on pubspec.yaml file 5 | 6 | void main() { 7 | runApp(new MaterialApp( 8 | home: new Home(), 9 | )); 10 | } 11 | 12 | class Home extends StatefulWidget { 13 | @override 14 | State createState() => new HomeState(); 15 | } 16 | 17 | class HomeState extends State { 18 | 19 | TextEditingController keyInputController = new TextEditingController(); 20 | TextEditingController valueInputController = new TextEditingController(); 21 | 22 | File jsonFile; 23 | Directory dir; 24 | String fileName = "myJSONFile.json"; 25 | bool fileExists = false; 26 | Map fileContent; 27 | 28 | @override 29 | void initState() { 30 | super.initState(); 31 | /*to store files temporary we use getTemporaryDirectory() but we need 32 | permanent storage so we use getApplicationDocumentsDirectory() */ 33 | getApplicationDocumentsDirectory().then((Directory directory) { 34 | dir = directory; 35 | jsonFile = new File(dir.path + "/" + fileName); 36 | fileExists = jsonFile.existsSync(); 37 | if (fileExists) this.setState(() => fileContent = JSON.decode(jsonFile.readAsStringSync())); 38 | }); 39 | } 40 | 41 | @override 42 | void dispose() { 43 | keyInputController.dispose(); 44 | valueInputController.dispose(); 45 | super.dispose(); 46 | } 47 | 48 | void createFile(Map content, Directory dir, String fileName) { 49 | print("Creating file!"); 50 | File file = new File(dir.path + "/" + fileName); 51 | file.createSync(); 52 | fileExists = true; 53 | file.writeAsStringSync(JSON.encode(content)); 54 | } 55 | 56 | void writeToFile(String key, String value) { 57 | print("Writing to file!"); 58 | Map content = {key: value}; 59 | if (fileExists) { 60 | print("File exists"); 61 | Map jsonFileContent = json.decode(jsonFile.readAsStringSync()); 62 | jsonFileContent.addAll(content); 63 | jsonFile.writeAsStringSync(JSON.encode(jsonFileContent)); 64 | } else { 65 | print("File does not exist!"); 66 | createFile(content, dir, fileName); 67 | } 68 | this.setState(() => fileContent = JSON.decode(jsonFile.readAsStringSync())); 69 | print(fileContent); 70 | } 71 | 72 | @override 73 | Widget build(BuildContext context) { 74 | return new Scaffold( 75 | appBar: new AppBar(title: new Text("JSON Tutorial"),), 76 | body: new Column( 77 | children: [ 78 | new Padding(padding: new EdgeInsets.only(top: 10.0)), 79 | new Text("File content: ", style: new TextStyle(fontWeight: FontWeight.bold),), 80 | new Text(fileContent.toString()), 81 | new Padding(padding: new EdgeInsets.only(top: 10.0)), 82 | new Text("Add to JSON file: "), 83 | new TextField( 84 | controller: keyInputController, 85 | ), 86 | new TextField( 87 | controller: valueInputController, 88 | ), 89 | new Padding(padding: new EdgeInsets.only(top: 20.0)), 90 | new RaisedButton( 91 | child: new Text("Add key, value pair"), 92 | onPressed: () => writeToFile(keyInputController.text, valueInputController.text), 93 | ) 94 | ], 95 | ), 96 | ); 97 | } 98 | } -------------------------------------------------------------------------------- /13-json-storage/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial 2 | description: A new Flutter project. 3 | 4 | dependencies: 5 | flutter: 6 | sdk: flutter 7 | path_provider: "^0.4.0" 8 | 9 | # The following adds the Cupertino Icons font to your application. 10 | # Use with the CupertinoIcons class for iOS style icons. 11 | cupertino_icons: ^0.1.0 12 | 13 | dev_dependencies: 14 | flutter_test: 15 | sdk: flutter 16 | 17 | 18 | # For information on the generic Dart part of this file, see the 19 | # following page: https://www.dartlang.org/tools/pub/pubspec 20 | 21 | # The following section is specific to Flutter. 22 | flutter: 23 | 24 | # The following line ensures that the Material Icons font is 25 | # included with your application, so that you can use the icons in 26 | # the material Icons class. 27 | uses-material-design: true 28 | 29 | # To add assets to your application, add an assets section, like this: 30 | # assets: 31 | # - images/a_dot_burr.jpeg 32 | # - images/a_dot_ham.jpeg 33 | 34 | # An image asset can refer to one or more resolution-specific "variants", see 35 | # https://flutter.io/assets-and-images/#resolution-aware. 36 | 37 | # For details regarding adding assets from package dependencies, see 38 | # https://flutter.io/assets-and-images/#from-packages 39 | 40 | # To add custom fonts to your application, add a fonts section here, 41 | # in this "flutter" section. Each entry in this list should have a 42 | # "family" key with the font family name, and a "fonts" key with a 43 | # list giving the asset and other descriptors for the font. For 44 | # example: 45 | # fonts: 46 | # - family: Schyler 47 | # fonts: 48 | # - asset: fonts/Schyler-Regular.ttf 49 | # - asset: fonts/Schyler-Italic.ttf 50 | # style: italic 51 | # - family: Trajan Pro 52 | # fonts: 53 | # - asset: fonts/TrajanPro.ttf 54 | # - asset: fonts/TrajanPro_Bold.ttf 55 | # weight: 700 56 | # 57 | # For details regarding fonts from package dependencies, 58 | # see https://flutter.io/custom-fonts/#from-packages 59 | -------------------------------------------------------------------------------- /15-changing-icon-color-onfocus/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:meta/meta.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp() 7 | )); 8 | } 9 | 10 | class MyApp extends StatelessWidget { 11 | @override 12 | Widget build(BuildContext context) { 13 | return new MaterialApp( 14 | title: 'Custom Bottom Nav', 15 | home: new Scaffold( 16 | appBar: new AppBar(title: new Text('Custom Bottom Nav')), 17 | body: new Container(), 18 | bottomNavigationBar: new BottomNav( 19 | navCallback: (i) => print("Navigating to $i"), 20 | ), 21 | ), 22 | ); 23 | } 24 | } 25 | 26 | class BottomNav extends StatefulWidget { 27 | final int initialIndex; 28 | final ValueChanged navCallback; 29 | 30 | BottomNav({@required this.navCallback, this.initialIndex: 0}); 31 | 32 | @override 33 | _BottomNavState createState() => new _BottomNavState(); 34 | } 35 | 36 | class _BottomNavState extends State { 37 | int _selected; 38 | 39 | @override 40 | void initState() { 41 | super.initState(); 42 | _selected = widget.initialIndex; 43 | notifyCallback(); 44 | } 45 | 46 | @override 47 | Widget build(BuildContext context) { 48 | return new Material( 49 | color: Colors.white, 50 | elevation: 8.0, 51 | child: new Container( 52 | height: 56.0, 53 | child: new Row( 54 | crossAxisAlignment: CrossAxisAlignment.stretch, 55 | children: [ 56 | _buildButton(0, Icons.home, "Home"), 57 | _buildButton(1, Icons.book, "Bookmarks"), 58 | _buildButton(2, Icons.video_library, "Videos"), 59 | ], 60 | ), 61 | ), 62 | ); 63 | } 64 | 65 | Widget _buildButton(int index, IconData data, String tooltip) { 66 | return new Flexible( 67 | flex: 1, 68 | child: new Tooltip( 69 | message: tooltip, 70 | child: new InkWell( 71 | onTap: () => onButtonTap(index), 72 | child: new Center( 73 | child: new Icon(data, 74 | color: _selected == index ? Colors.red : Colors.grey, 75 | ), 76 | ), 77 | ), 78 | ), 79 | ); 80 | } 81 | 82 | onButtonTap(int index) { 83 | setState(() { 84 | _selected = index; 85 | }); 86 | notifyCallback(); 87 | } 88 | 89 | notifyCallback() { 90 | widget.navCallback(_selected); 91 | } 92 | } -------------------------------------------------------------------------------- /17-raised-button/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State{ 15 | 16 | String _value = 'Hello World'; 17 | 18 | void _onPressed() { 19 | setState(() { 20 | _value = 'My name is Raunak'; 21 | }); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text('Name here'), 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Text(_value), 37 | new RaisedButton(onPressed: _onPressed, child: new Text('Click me')), 38 | ], 39 | ), 40 | ), 41 | ), 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /18-raised-button-with-parameters/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State{ 15 | 16 | String _value = 'Hello World'; 17 | 18 | void _onPressed(String value) { 19 | setState(() { 20 | _value = value; 21 | }); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text('Name here'), 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Text(_value), 37 | //dart treates everything as objects so we pass a function in onPressed value 38 | new RaisedButton(onPressed: () => _onPressed('Hello Raunak'), child: new Text('Click me')), 39 | ], 40 | ), 41 | ), 42 | ), 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /19-flat-button/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State{ 15 | 16 | String _value = 'Hello World'; 17 | 18 | void _onPressed() { 19 | setState(() { 20 | _value = new DateTime.now().toString(); 21 | }); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text('Name here'), 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Text(_value), 37 | //dart treates everything as objects so we pass a function in onPressed value 38 | new FlatButton(onPressed: _onPressed, child: new Text('Click me')) 39 | ], 40 | ), 41 | ), 42 | ), 43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /20-icon-button/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | int _value = 0; 18 | 19 | void _add() { 20 | setState(() { 21 | _value++; 22 | }); 23 | } 24 | 25 | void _subtract() { 26 | setState(() { 27 | _value--; 28 | }); 29 | } 30 | 31 | @override 32 | Widget build(BuildContext context) { 33 | return new Scaffold( 34 | appBar: new AppBar( 35 | title: new Text('Name here'), 36 | ), 37 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 38 | body: new Container( 39 | padding: new EdgeInsets.all(32.0), 40 | child: new Center( 41 | child: new Column( 42 | children: [ 43 | new Text('Value = ${_value}'), 44 | new IconButton(icon: new Icon(Icons.add), onPressed: _add), 45 | new IconButton(icon: new Icon(Icons.remove), onPressed: _subtract), 46 | ], 47 | ), 48 | ), 49 | ), 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /21-updating-data-in-textfields/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | String _value = ''; 18 | 19 | void _onChanged(String value) { 20 | setState(() => _value = 'Change: ${value}'); 21 | } 22 | 23 | void _onSubmit(String value) { 24 | setState(() => _value = 'Submit: ${value}'); 25 | } 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return new Scaffold( 30 | appBar: new AppBar( 31 | title: new Text('Name here'), 32 | ), 33 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 34 | body: new Container( 35 | padding: new EdgeInsets.all(32.0), 36 | child: new Center( 37 | child: new Column( 38 | children: [ 39 | new Text(_value), 40 | new TextField( 41 | decoration: new InputDecoration( 42 | labelText: 'Hello', 43 | hintText: 'Hint', 44 | icon: new Icon(Icons.people) 45 | ), 46 | autocorrect: true, 47 | autofocus: true, 48 | 49 | //displaying number keyboard 50 | //keyboardType: TextInputType.number, 51 | 52 | //displaying text keyboard 53 | keyboardType: TextInputType.text, 54 | 55 | onChanged: _onChanged, 56 | onSubmitted: _onSubmit, 57 | ) 58 | ], 59 | ), 60 | ), 61 | ), 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /22-checkbox/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | bool _value1 = false; 18 | bool _value2 = false; 19 | 20 | //we omitted the brackets '{}' and are using fat arrow '=>' instead, this is dart syntax 21 | void _value1Changed(bool value) => setState(() => _value1 = value); 22 | void _value2Changed(bool value) => setState(() => _value2 = value); 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text('Name here'), 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Checkbox(value: _value1, onChanged: _value1Changed), 37 | new CheckboxListTile( 38 | value: _value2, 39 | onChanged: _value2Changed, 40 | title: new Text('Hello World'), 41 | controlAffinity: ListTileControlAffinity.leading, 42 | subtitle: new Text('Subtitle'), 43 | secondary: new Icon(Icons.archive), 44 | activeColor: Colors.red, 45 | ), 46 | ], 47 | ), 48 | ), 49 | ), 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /23-radios-with-functions/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | int _value1 = 0; 18 | int _value2 = 0; 19 | 20 | void _setvalue1(int value) => setState(() => _value1 = value); 21 | void _setvalue2(int value) => setState(() => _value2 = value); 22 | 23 | Widget makeRadios() { 24 | List list = new List(); 25 | 26 | for(int i=0; i<3; i++){ 27 | list.add(new Radio(value: i, groupValue: _value1, onChanged: _setvalue1)); 28 | } 29 | 30 | Column column = new Column( 31 | children: list, 32 | ); 33 | 34 | return column; 35 | } 36 | 37 | Widget makeRadioTiles() { 38 | List list = new List(); 39 | 40 | for(int i = 0; i < 3; i++){ 41 | list.add(new RadioListTile( 42 | value: i, 43 | groupValue: _value2, 44 | onChanged: _setvalue2, 45 | activeColor: Colors.green, 46 | controlAffinity: ListTileControlAffinity.trailing, 47 | title: new Text('Item: ${i}'), 48 | subtitle: new Text('sub title'), 49 | 50 | )); 51 | } 52 | 53 | Column column = new Column(children: list,); 54 | return column; 55 | } 56 | 57 | @override 58 | Widget build(BuildContext context) { 59 | return new Scaffold( 60 | appBar: new AppBar( 61 | title: new Text('Name here'), 62 | ), 63 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 64 | body: new Container( 65 | padding: new EdgeInsets.all(32.0), 66 | child: new Center( 67 | child: new Column( 68 | children: [ 69 | makeRadios(), 70 | makeRadioTiles() 71 | ], 72 | ), 73 | ), 74 | ), 75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /24-switches/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | bool _value1 = false; 18 | bool _value2 = false; 19 | 20 | void _onChanged1(bool value) => setState(() => _value1 = value); 21 | void _onChanged2(bool value) => setState(() => _value2 = value); 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return new Scaffold( 26 | appBar: new AppBar( 27 | title: new Text('Name here'), 28 | ), 29 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 30 | body: new Container( 31 | padding: new EdgeInsets.all(32.0), 32 | child: new Center( 33 | child: new Column( 34 | children: [ 35 | new Switch(value: _value1, onChanged: _onChanged1), 36 | new SwitchListTile( 37 | value: _value2, 38 | onChanged: _onChanged2, 39 | title: new Text('Hello World', style: new TextStyle(fontWeight: FontWeight.bold, color: Colors.red)), 40 | ) 41 | ], 42 | ), 43 | ), 44 | ), 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /25-slider/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | double _value = 0.0; 18 | void _setvalue(double value) => setState(() => _value = value); 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return new Scaffold( 23 | appBar: new AppBar( 24 | title: new Text('Name here'), 25 | ), 26 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 27 | body: new Container( 28 | padding: new EdgeInsets.all(32.0), 29 | child: new Center( 30 | child: new Column( 31 | children: [ 32 | new Text('Value: ${(_value * 100).round()}'), 33 | new Slider(value: _value, onChanged: _setvalue) 34 | ], 35 | ), 36 | ), 37 | ), 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /26-datepicker/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | String _value = ''; 19 | 20 | Future _selectDate() async { 21 | DateTime picked = await showDatePicker( 22 | context: context, 23 | initialDate: new DateTime.now(), 24 | firstDate: new DateTime(2016), 25 | lastDate: new DateTime(2019) 26 | ); 27 | if(picked != null) setState(() => _value = picked.toString()); 28 | } 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return new Scaffold( 33 | appBar: new AppBar( 34 | title: new Text('Name here'), 35 | ), 36 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 37 | body: new Container( 38 | padding: new EdgeInsets.all(32.0), 39 | child: new Center( 40 | child: new Column( 41 | children: [ 42 | new Text(_value), 43 | new RaisedButton(onPressed: _selectDate, child: new Text('Click me'),) 44 | ], 45 | ), 46 | ), 47 | ), 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /27-appBar/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | int _value = 0; 19 | 20 | void _add() => setState(() => _value++); 21 | void _remove() => setState(() => _value--); 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return new Scaffold( 26 | appBar: new AppBar( 27 | title: new Text('Name here'), 28 | backgroundColor: Colors.red, 29 | actions: [ 30 | new IconButton(icon: new Icon(Icons.add), onPressed: _add), 31 | new IconButton(icon: new Icon(Icons.remove), onPressed: _remove) 32 | ], 33 | ), 34 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 35 | body: new Container( 36 | padding: new EdgeInsets.all(32.0), 37 | child: new Center( 38 | child: new Column( 39 | children: [ 40 | new Text(_value.toString(), style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 37.0),) 41 | ], 42 | ), 43 | ), 44 | ), 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /28-floating-action-button/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | String _value = ''; 19 | void _onClicked() => setState(() => _value = new DateTime.now().toString()); 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | return new Scaffold( 24 | appBar: new AppBar( 25 | title: new Text('Name here'), 26 | backgroundColor: Colors.red, 27 | ), 28 | floatingActionButton: new FloatingActionButton( 29 | onPressed: _onClicked, 30 | backgroundColor: Colors.red, 31 | //if you set mini to true then it will make your floating button small 32 | mini: false, 33 | child: new Icon(Icons.timer), 34 | ), 35 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 36 | body: new Container( 37 | padding: new EdgeInsets.all(32.0), 38 | child: new Center( 39 | child: new Column( 40 | children: [ 41 | new Text(_value) 42 | ], 43 | ), 44 | ), 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /29-drawer-which-shows-togglemenu/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | return new Scaffold( 21 | appBar: new AppBar( 22 | title: new Text('Name here'), 23 | backgroundColor: Colors.red, 24 | ), 25 | drawer: new Drawer( 26 | child: new Container( 27 | padding: new EdgeInsets.all(32.0), 28 | child: new Column( 29 | children: [ 30 | new Text('Hello Drawer'), 31 | new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close')) 32 | ], 33 | ), 34 | ), 35 | ), 36 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 37 | body: new Container( 38 | padding: new EdgeInsets.all(32.0), 39 | child: new Center( 40 | child: new Column( 41 | children: [ 42 | new Text('Add widgets here') 43 | ], 44 | ), 45 | ), 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /30-footer-buttons/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | String _value = ''; 19 | void _onClick(String value) => setState(() => _value = value); 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | return new Scaffold( 24 | appBar: new AppBar( 25 | title: new Text('Name here'), 26 | backgroundColor: Colors.red, 27 | ), 28 | persistentFooterButtons: [ 29 | new IconButton(icon: new Icon(Icons.timer), onPressed: () => _onClick('Button1')), 30 | new IconButton(icon: new Icon(Icons.people), onPressed: () => _onClick('Button2')), 31 | new IconButton(icon: new Icon(Icons.map), onPressed: () => _onClick('Button3')), 32 | ], 33 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 34 | body: new Container( 35 | padding: new EdgeInsets.all(32.0), 36 | child: new Center( 37 | child: new Column( 38 | children: [ 39 | new Text(_value) 40 | ], 41 | ), 42 | ), 43 | ), 44 | ); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /31-BottomNavigationBar/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | List _items; 18 | String _value = ''; 19 | int _index = 0; 20 | 21 | @override 22 | //initState() is the default state or something which runs before the actual state or before the setState 23 | void initState() { 24 | _items = new List(); 25 | _items.add(new BottomNavigationBarItem(icon: new Icon(Icons.people), title: new Text('People'))); 26 | _items.add(new BottomNavigationBarItem(icon: new Icon(Icons.weekend), title: new Text('Weekend'))); 27 | _items.add(new BottomNavigationBarItem(icon: new Icon(Icons.message), title: new Text('Message'))); 28 | } 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return new Scaffold( 33 | appBar: new AppBar( 34 | title: new Text('Name here'), 35 | backgroundColor: Colors.red, 36 | ), 37 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 38 | body: new Container( 39 | padding: new EdgeInsets.all(32.0), 40 | child: new Center( 41 | child: new Column( 42 | children: [ 43 | new Text(_value) 44 | ], 45 | ), 46 | ), 47 | ), 48 | bottomNavigationBar: new BottomNavigationBar( 49 | items: _items, 50 | fixedColor: Colors.blue, 51 | currentIndex: _index, 52 | onTap: (int item){ 53 | _index = item; 54 | _value = "Current value is: ${_index.toString()}"; 55 | }, 56 | ), 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /32-using-bottomsheets/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | void _showBottom(){ 18 | showModalBottomSheet( 19 | context: context, 20 | /*bottom sheet is like a drawer that pops off where you can put any 21 | controls you want, it is used typically for user notifications*/ 22 | //builder lets your code generate the code 23 | builder: (BuildContext context){ 24 | return new Container( 25 | padding: new EdgeInsets.all(15.0), 26 | child: new Row( 27 | mainAxisAlignment: MainAxisAlignment.center, 28 | children: [ 29 | new Text('Some info here', style: new TextStyle(color: Colors.red, fontWeight: FontWeight.bold),), 30 | new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),) 31 | ], 32 | ), 33 | ); 34 | } 35 | ); 36 | } 37 | 38 | @override 39 | Widget build(BuildContext context) { 40 | return new Scaffold( 41 | appBar: new AppBar( 42 | title: new Text('Name here'), 43 | backgroundColor: Colors.red, 44 | ), 45 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 46 | body: new Container( 47 | padding: new EdgeInsets.all(32.0), 48 | child: new Center( 49 | child: new Column( 50 | children: [ 51 | new Text('Add widgets here'), 52 | new RaisedButton(onPressed: _showBottom, child: new Text('Click me'),) 53 | ], 54 | ), 55 | ), 56 | ), 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /33-using-snackBars/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main(){ 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State{ 16 | 17 | final GlobalKey _scaffoldstate = new GlobalKey(); 18 | 19 | void _showBar(){ 20 | _scaffoldstate.currentState.showSnackBar(new SnackBar(content: new Text('Hello World'))); 21 | } 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return new Scaffold( 26 | /*a key is a way of refrencing an actual widget, below we are making refrence 27 | of an object we created, it will be accessible across the entire application since 28 | we are creating a GlobalKey*/ 29 | key: _scaffoldstate, 30 | appBar: new AppBar( 31 | title: new Text('Name here'), 32 | backgroundColor: Colors.red, 33 | ), 34 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 35 | body: new Container( 36 | padding: new EdgeInsets.all(32.0), 37 | child: new Center( 38 | child: new Column( 39 | children: [ 40 | new Text('Add widgets here'), 41 | new RaisedButton(onPressed: _showBar, child: new Text('Click me'),) 42 | ], 43 | ), 44 | ), 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /34-alert-dialog/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | Future _showAlert(BuildContext context, String message) async { 19 | return showDialog( 20 | context: context, 21 | child: new AlertDialog( 22 | title: new Text(message), 23 | actions: [ 24 | new FlatButton(onPressed: () => Navigator.pop(context), child: new Text('Ok')) 25 | ], 26 | ) 27 | 28 | ); 29 | } 30 | 31 | @override 32 | Widget build(BuildContext context) { 33 | return new Scaffold( 34 | appBar: new AppBar( 35 | title: new Text('Name here'), 36 | backgroundColor: Colors.red, 37 | ), 38 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 39 | body: new Container( 40 | padding: new EdgeInsets.all(32.0), 41 | child: new Center( 42 | child: new Column( 43 | children: [ 44 | new Text('Add widgets here'), 45 | new RaisedButton(onPressed: () => _showAlert(context, 'Do you like flutter, I do!'), child: new Text('Click me'),) 46 | ], 47 | ), 48 | ), 49 | ), 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /35-simple-dialog/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | enum Answers{YES,NO,MAYBE} 16 | 17 | //State is information of the application that can change over time or when some actions are taken. 18 | class _State extends State{ 19 | 20 | String _value = ''; 21 | 22 | void _setValue(String value) => setState(() => _value = value); 23 | 24 | Future _askUser() async { 25 | switch( 26 | await showDialog( 27 | context: context, 28 | /*it shows a popup with few options which you can select, for option we 29 | created enums which we can use with switch statement, in this first switch 30 | will wait for the user to select the option which it can use with switch cases*/ 31 | child: new SimpleDialog( 32 | title: new Text('Do you like Flutter?'), 33 | children: [ 34 | new SimpleDialogOption(child: new Text('Yes!!!'),onPressed: (){Navigator.pop(context, Answers.YES);},), 35 | new SimpleDialogOption(child: new Text('NO :('),onPressed: (){Navigator.pop(context, Answers.NO);},), 36 | new SimpleDialogOption(child: new Text('Maybe :|'),onPressed: (){Navigator.pop(context, Answers.MAYBE);},), 37 | ], 38 | ) 39 | ) 40 | ) { 41 | case Answers.YES: 42 | _setValue('Yes'); 43 | break; 44 | case Answers.NO: 45 | _setValue('No'); 46 | break; 47 | case Answers.MAYBE: 48 | _setValue('Maybe'); 49 | break; 50 | } 51 | } 52 | 53 | @override 54 | Widget build(BuildContext context) { 55 | return new Scaffold( 56 | appBar: new AppBar( 57 | title: new Text('Name here'), 58 | backgroundColor: Colors.red, 59 | ), 60 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 61 | body: new Container( 62 | padding: new EdgeInsets.all(32.0), 63 | child: new Center( 64 | child: new Column( 65 | children: [ 66 | new Text(_value), 67 | new RaisedButton(onPressed: _askUser, child: new Text('Click me'),) 68 | ], 69 | ), 70 | ), 71 | ), 72 | ); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /36-rows-and-columns/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | TextEditingController _user = new TextEditingController(); 19 | TextEditingController _pass = new TextEditingController(); 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | return new Scaffold( 24 | appBar: new AppBar( 25 | title: new Text('Name here'), 26 | backgroundColor: Colors.red, 27 | ), 28 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 29 | body: new Container( 30 | padding: new EdgeInsets.all(32.0), 31 | child: new Center( 32 | child: new Column( 33 | children: [ 34 | new Text('Please Login'), 35 | new Row( 36 | children: [ 37 | new Text('Username'), 38 | /*this will give an error because TextField is infinite, you can type 39 | and type, it doesn't know where to stop and confuse Flutter but our 40 | screen width is limited o to solve this we use 'Expanded' widget 41 | 42 | controller is like an Android Cursor and we use it with TextField*/ 43 | //new TextField(controller: _user,) 44 | 45 | new Expanded(child: new TextField(controller: _user,)) 46 | ], 47 | ), 48 | new Row( 49 | children: [ 50 | new Text('Password'), 51 | //obscureText changes text to dots for password fields 52 | new Expanded(child: new TextField(controller: _pass, obscureText: true,)) 53 | ], 54 | ), 55 | 56 | new Padding( 57 | padding: new EdgeInsets.all(32.0), 58 | //onPressed will show login with the username typed on terminal 59 | child: new RaisedButton(onPressed: () => print('Login ${_user.text}'), child: new Text('Click me'),), 60 | ) 61 | 62 | ], 63 | ), 64 | ), 65 | ), 66 | ); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /37-using-cards/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | return new Scaffold( 21 | appBar: new AppBar( 22 | title: new Text('Name here'), 23 | backgroundColor: Colors.red, 24 | ), 25 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 26 | body: new Container( 27 | padding: new EdgeInsets.all(32.0), 28 | child: new Center( 29 | child: new Column( 30 | children: [ 31 | new Card( 32 | child: new Container( 33 | padding: new EdgeInsets.all(32.0), 34 | child: new Column( 35 | children: [ 36 | new Text('Hello World'), 37 | new Text('How are you?') 38 | ], 39 | ), 40 | ), 41 | ), 42 | new Card( 43 | child: new Container( 44 | padding: new EdgeInsets.all(32.0), 45 | child: new Column( 46 | children: [ 47 | new Text('Hello World'), 48 | new Text('How are you?') 49 | ], 50 | ), 51 | ), 52 | ), 53 | new Card( 54 | child: new Container( 55 | padding: new EdgeInsets.all(32.0), 56 | child: new Column( 57 | children: [ 58 | new Text('Hello World'), 59 | new Text('How are you?') 60 | ], 61 | ), 62 | ), 63 | ) 64 | ], 65 | ), 66 | ), 67 | ), 68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /38-using-Expanded/images/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/38-using-Expanded/images/flutter.png -------------------------------------------------------------------------------- /38-using-Expanded/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | void main(){ 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | //State is information of the application that can change over time or when some actions are taken. 16 | class _State extends State{ 17 | 18 | /* 19 | 1. Create a directory called images and add your image there 20 | 2. In pubspec.yamp add dependency for using assets 21 | */ 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return new Scaffold( 26 | appBar: new AppBar( 27 | title: new Text('Name here'), 28 | backgroundColor: Colors.red, 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Text('Image from assets'), 37 | new Image.asset('images/flutter.png'), 38 | new Text('Image from network'), 39 | //this image was outside the screen so we are using Expanded which will fit the image into the screen 40 | new Expanded(child: new Image.network('https://static.makeuseof.com/wp-content/uploads/2012/10/flutter-logo.jpg')) 41 | ], 42 | ), 43 | ), 44 | ), 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /38-using-Expanded/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_udemy_course 2 | description: A new Flutter project. 3 | 4 | dependencies: 5 | flutter: 6 | sdk: flutter 7 | 8 | # The following adds the Cupertino Icons font to your application. 9 | # Use with the CupertinoIcons class for iOS style icons. 10 | cupertino_icons: ^0.1.2 11 | 12 | dev_dependencies: 13 | flutter_test: 14 | sdk: flutter 15 | 16 | 17 | # For information on the generic Dart part of this file, see the 18 | # following page: https://www.dartlang.org/tools/pub/pubspec 19 | 20 | # The following section is specific to Flutter. 21 | flutter: 22 | 23 | # The following line ensures that the Material Icons font is 24 | # included with your application, so that you can use the icons in 25 | # the material Icons class. 26 | uses-material-design: true 27 | 28 | # To add assets to your application, add an assets section, like this: 29 | assets: 30 | - images/flutter.png 31 | # - images/a_dot_ham.jpeg 32 | 33 | # An image asset can refer to one or more resolution-specific "variants", see 34 | # https://flutter.io/assets-and-images/#resolution-aware. 35 | 36 | # For details regarding adding assets from package dependencies, see 37 | # https://flutter.io/assets-and-images/#from-packages 38 | 39 | # To add custom fonts to your application, add a fonts section here, 40 | # in this "flutter" section. Each entry in this list should have a 41 | # "family" key with the font family name, and a "fonts" key with a 42 | # list giving the asset and other descriptors for the font. For 43 | # example: 44 | # fonts: 45 | # - family: Schyler 46 | # fonts: 47 | # - asset: fonts/Schyler-Regular.ttf 48 | # - asset: fonts/Schyler-Italic.ttf 49 | # style: italic 50 | # - family: Trajan Pro 51 | # fonts: 52 | # - asset: fonts/TrajanPro.ttf 53 | # - asset: fonts/TrajanPro_Bold.ttf 54 | # weight: 700 55 | # 56 | # For details regarding fonts from package dependencies, 57 | # see https://flutter.io/custom-fonts/#from-packages 58 | -------------------------------------------------------------------------------- /39-Listview-builder-using-dart-maps/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'package:http/http.dart' as http; 4 | import 'dart:async'; 5 | import 'dart:convert'; 6 | import 'dart:io'; 7 | 8 | void main() { 9 | runApp(new MaterialApp( 10 | home: new MyApp(), 11 | )); 12 | } 13 | 14 | class MyApp extends StatefulWidget { 15 | @override 16 | _State createState() => new _State(); 17 | } 18 | 19 | //State is information of the application that can change over time or when some actions are taken. 20 | class _State extends State { 21 | 22 | //Map is basically a type of key/value pair in dart 23 | Map _countries = new Map(); 24 | 25 | void _getData() async { 26 | var url = 'http://country.io/names.json'; 27 | var response = await http.get(url); 28 | 29 | if(response.statusCode == 200) { 30 | setState(() => _countries = JSON.decode(response.body)); 31 | print('Loaded ${_countries.length} countries'); 32 | } 33 | } 34 | 35 | 36 | @override 37 | Widget build(BuildContext context) { 38 | 39 | //_getData(); 40 | 41 | return new Scaffold( 42 | appBar: new AppBar( 43 | title: new Text('Name here'), 44 | ), 45 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 46 | body: new Container( 47 | padding: new EdgeInsets.all(32.0), 48 | child: new Center( 49 | child: new Column( 50 | children: [ 51 | new Text('Countries', style: new TextStyle(fontWeight: FontWeight.bold),), 52 | 53 | /*Listview diplay rows for different widgets, 54 | 55 | Listview.builder automatically builds its child widgets with a 56 | template and a list*/ 57 | 58 | new Expanded(child: new ListView.builder( 59 | itemCount: _countries.length, 60 | itemBuilder: (BuildContext context, int index){ 61 | String key = _countries.keys.elementAt(index); 62 | return new Row( 63 | children: [ 64 | new Text('${key} : '), 65 | new Text(_countries[key]) 66 | ], 67 | ); 68 | }, 69 | 70 | )) 71 | 72 | ], 73 | ), 74 | ) 75 | ), 76 | ); 77 | } 78 | 79 | @override 80 | void initState() { 81 | _getData(); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /40-Listview-builder-using-dart-lists/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //State is information of the application that can change over time or when some actions are taken. 15 | class _State extends State { 16 | 17 | //List is basically an array 18 | List _pets = ['Dogs', 'Cats', 'Fish', 'Turtle']; 19 | 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | 24 | //_getData(); 25 | 26 | return new Scaffold( 27 | appBar: new AppBar( 28 | title: new Text('Name here'), 29 | ), 30 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 31 | body: new Container( 32 | padding: new EdgeInsets.all(32.0), 33 | child: new Center( 34 | child: new Column( 35 | children: [ 36 | new Text('Pets', style: new TextStyle(fontWeight: FontWeight.bold),), 37 | 38 | /*Listview diplay rows for different widgets, 39 | 40 | Listview.builder automatically builds its child widgets with a 41 | template and a list*/ 42 | 43 | new Expanded(child: new ListView.builder( 44 | itemCount: _pets.length, 45 | itemBuilder: (BuildContext context, int index){ 46 | return new Text(_pets.elementAt(index)); 47 | }, 48 | 49 | )) 50 | 51 | ], 52 | ), 53 | ) 54 | ), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /41-coffee-central-app/images/breakfast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/41-coffee-central-app/images/breakfast.jpg -------------------------------------------------------------------------------- /41-coffee-central-app/images/drinks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/41-coffee-central-app/images/drinks.jpg -------------------------------------------------------------------------------- /41-coffee-central-app/images/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/41-coffee-central-app/images/flutter.png -------------------------------------------------------------------------------- /41-coffee-central-app/images/food.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/41-coffee-central-app/images/food.jpg -------------------------------------------------------------------------------- /41-coffee-central-app/images/lunch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/41-coffee-central-app/images/lunch.jpg -------------------------------------------------------------------------------- /41-coffee-central-app/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:coffee_central_app/screens/home.dart'; 3 | import 'package:coffee_central_app/screens/foodmenu_selected.dart'; 4 | 5 | void main() => runApp(new MyApp()); 6 | 7 | class MyApp extends StatefulWidget{ 8 | @override 9 | _State createState() => new _State(); 10 | } 11 | 12 | class _State extends State{ 13 | @override 14 | Widget build(BuildContext context) { 15 | return new MaterialApp( 16 | debugShowCheckedModeBanner: false, 17 | title: 'Navigation', 18 | routes: { 19 | '/Home': (BuildContext context) => new Home(), 20 | '/FoodMenuSelected': (BuildContext context) => new FoodMenuSelected(), 21 | }, 22 | home: new Home(), 23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /41-coffee-central-app/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:coffee_central_app/screens/home.dart'; 3 | import 'package:coffee_central_app/screens/foodmenu_selected.dart'; 4 | 5 | void main() => runApp(new MyApp()); 6 | 7 | class MyApp extends StatefulWidget{ 8 | @override 9 | _State createState() => new _State(); 10 | } 11 | 12 | class _State extends State{ 13 | @override 14 | Widget build(BuildContext context) { 15 | return new MaterialApp( 16 | debugShowCheckedModeBanner: false, 17 | title: 'Navigation', 18 | routes: { 19 | '/Home': (BuildContext context) => new Home(), 20 | '/FoodMenuSelected': (BuildContext context) => new FoodMenuSelected(), 21 | }, 22 | home: new Home(), 23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /41-coffee-central-app/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: coffee_central_app 2 | description: A new Flutter project. 3 | 4 | dependencies: 5 | flutter: 6 | sdk: flutter 7 | 8 | # The following adds the Cupertino Icons font to your application. 9 | # Use with the CupertinoIcons class for iOS style icons. 10 | cupertino_icons: ^0.1.2 11 | 12 | dev_dependencies: 13 | flutter_test: 14 | sdk: flutter 15 | 16 | 17 | # For information on the generic Dart part of this file, see the 18 | # following page: https://www.dartlang.org/tools/pub/pubspec 19 | 20 | # The following section is specific to Flutter. 21 | flutter: 22 | 23 | # The following line ensures that the Material Icons font is 24 | # included with your application, so that you can use the icons in 25 | # the material Icons class. 26 | uses-material-design: true 27 | 28 | # To add assets to your application, add an assets section, like this: 29 | assets: 30 | - images/flutter.png 31 | - images/breakfast.jpg 32 | - images/lunch.jpg 33 | - images/food.jpg 34 | - images/drinks.jpg 35 | 36 | # An image asset can refer to one or more resolution-specific "variants", see 37 | # https://flutter.io/assets-and-images/#resolution-aware. 38 | 39 | # For details regarding adding assets from package dependencies, see 40 | # https://flutter.io/assets-and-images/#from-packages 41 | 42 | # To add custom fonts to your application, add a fonts section here, 43 | # in this "flutter" section. Each entry in this list should have a 44 | # "family" key with the font family name, and a "fonts" key with a 45 | # list giving the asset and other descriptors for the font. For 46 | # example: 47 | # fonts: 48 | # - family: Schyler 49 | # fonts: 50 | # - asset: fonts/Schyler-Regular.ttf 51 | # - asset: fonts/Schyler-Italic.ttf 52 | # style: italic 53 | # - family: Trajan Pro 54 | # fonts: 55 | # - asset: fonts/TrajanPro.ttf 56 | # - asset: fonts/TrajanPro_Bold.ttf 57 | # weight: 700 58 | # 59 | # For details regarding fonts from package dependencies, 60 | # see https://flutter.io/custom-fonts/#from-packages 61 | -------------------------------------------------------------------------------- /42-using-custom-widgets/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:tutorial/widgets.dart'; 3 | 4 | void main() { 5 | runApp(new MyApp()); 6 | } 7 | 8 | class MyApp extends StatelessWidget{ 9 | @override 10 | Widget build(BuildContext context) { 11 | 12 | return new MaterialApp( 13 | title: 'Flutter Demo', 14 | home: new Texty(), 15 | ); 16 | } 17 | 18 | } 19 | 20 | class MyHomePage extends StatefulWidget { 21 | MyHomePage({Key key, this.title}) : super(key: key); 22 | 23 | final String title; 24 | 25 | @override 26 | _MyHomePageState createState() => new _MyHomePageState(); 27 | } 28 | 29 | class _MyHomePageState extends State{ 30 | @override 31 | Widget build(BuildContext context) { 32 | 33 | return new Scaffold( 34 | appBar: new AppBar( 35 | title: new Text('Flutter Demo'), 36 | ), 37 | body: new Center( 38 | child: new Text(''), 39 | ), 40 | ); 41 | 42 | } 43 | } -------------------------------------------------------------------------------- /42-using-custom-widgets/lib/widgets.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Texty extends StatelessWidget { 4 | @override 5 | Widget build(BuildContext context) { 6 | return new Container(child: new Text('This works')); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /43-using-image-assets/assets/2.0x/explore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/43-using-image-assets/assets/2.0x/explore.png -------------------------------------------------------------------------------- /43-using-image-assets/assets/explore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/43-using-image-assets/assets/explore.png -------------------------------------------------------------------------------- /43-using-image-assets/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:tutorial/widgets.dart'; 3 | 4 | void main() { 5 | runApp(new MyApp()); 6 | } 7 | 8 | class MyApp extends StatelessWidget{ 9 | @override 10 | Widget build(BuildContext context) { 11 | 12 | return new MaterialApp( 13 | title: 'Flutter Demo', 14 | home: new Texty(), 15 | ); 16 | } 17 | 18 | } 19 | 20 | class MyHomePage extends StatefulWidget { 21 | MyHomePage({Key key, this.title}) : super(key: key); 22 | 23 | final String title; 24 | 25 | @override 26 | _MyHomePageState createState() => new _MyHomePageState(); 27 | } 28 | 29 | class _MyHomePageState extends State{ 30 | @override 31 | Widget build(BuildContext context) { 32 | 33 | return new Scaffold( 34 | appBar: new AppBar( 35 | title: new Text('Flutter Demo'), 36 | ), 37 | body: new Center( 38 | child: new MyExploreWidget(), 39 | ), 40 | ); 41 | 42 | } 43 | } -------------------------------------------------------------------------------- /43-using-image-assets/lib/widgets.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Texty extends StatelessWidget { 4 | @override 5 | Widget build(BuildContext context) { 6 | return new Container(child: new Text('This works')); 7 | } 8 | } 9 | 10 | class MyExploreWidget extends StatelessWidget { 11 | @override 12 | Widget build(BuildContext context) { 13 | var assetsImage = new AssetImage('assets/explore.png'); 14 | var image = new Image(image: assetsImage, width: 48.0, height: 48.0); 15 | return new Container(child: image); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /43-using-image-assets/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial 2 | description: A new Flutter project. 3 | 4 | dependencies: 5 | flutter: 6 | sdk: flutter 7 | path_provider: "^0.4.0" 8 | 9 | # The following adds the Cupertino Icons font to your application. 10 | # Use with the CupertinoIcons class for iOS style icons. 11 | cupertino_icons: ^0.1.0 12 | 13 | dev_dependencies: 14 | flutter_test: 15 | sdk: flutter 16 | 17 | 18 | # For information on the generic Dart part of this file, see the 19 | # following page: https://www.dartlang.org/tools/pub/pubspec 20 | 21 | # The following section is specific to Flutter. 22 | flutter: 23 | 24 | # The following line ensures that the Material Icons font is 25 | # included with your application, so that you can use the icons in 26 | # the material Icons class. 27 | uses-material-design: true 28 | 29 | # To add assets to your application, add an assets section, like this: 30 | assets: 31 | - assets/explore.png 32 | - assets/2.0x/explore.png 33 | 34 | # An image asset can refer to one or more resolution-specific "variants", see 35 | # https://flutter.io/assets-and-images/#resolution-aware. 36 | 37 | # For details regarding adding assets from package dependencies, see 38 | # https://flutter.io/assets-and-images/#from-packages 39 | 40 | # To add custom fonts to your application, add a fonts section here, 41 | # in this "flutter" section. Each entry in this list should have a 42 | # "family" key with the font family name, and a "fonts" key with a 43 | # list giving the asset and other descriptors for the font. For 44 | # example: 45 | # fonts: 46 | # - family: Schyler 47 | # fonts: 48 | # - asset: fonts/Schyler-Regular.ttf 49 | # - asset: fonts/Schyler-Italic.ttf 50 | # style: italic 51 | # - family: Trajan Pro 52 | # fonts: 53 | # - asset: fonts/TrajanPro.ttf 54 | # - asset: fonts/TrajanPro_Bold.ttf 55 | # weight: 700 56 | # 57 | # For details regarding fonts from package dependencies, 58 | # see https://flutter.io/custom-fonts/#from-packages 59 | -------------------------------------------------------------------------------- /44-Listview-builder-with-refreshIndicator/lib/models.dart: -------------------------------------------------------------------------------- 1 | class Todo{ 2 | bool finished; 3 | String name; 4 | 5 | Todo(this.finished, this.name); 6 | } -------------------------------------------------------------------------------- /45-using-tooltips/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | String _value = 'Nothing Yet'; 17 | 18 | void _onPressed() => setState(() => _value = new DateTime.now().toString()); 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return new Scaffold( 23 | appBar: new AppBar( 24 | title: new Text('Name here'), 25 | ), 26 | body: new Container( 27 | padding: new EdgeInsets.all(32.0), 28 | child: new Center( 29 | child: new Column( 30 | children: [ 31 | new Text(_value), 32 | new IconButton( 33 | icon: new Icon(Icons.timer), 34 | onPressed: _onPressed, 35 | tooltip: 'Click me', 36 | ) 37 | ], 38 | ), 39 | ) 40 | ), 41 | ); 42 | } 43 | } -------------------------------------------------------------------------------- /46-using-chips-keys-and-children/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | int counter = 0; 17 | List _list = new List(); 18 | 19 | @override 20 | void initState() { 21 | for (int i = 0; i < 5; i++) { 22 | Widget child = _newItem(i); 23 | _list.add(child); 24 | } 25 | } 26 | 27 | void _onClicked() { 28 | Widget child = _newItem(counter); 29 | setState(() => _list.add(child)); 30 | } 31 | 32 | Widget _newItem(int i) { 33 | Key key = new Key('item_${i}'); 34 | Container child = new Container( 35 | //key allows us to reference that object, kind of like identifier 36 | //we need key to access child widget tree, in this case we need container 37 | key: key, 38 | padding: new EdgeInsets.all(10.0), 39 | child: new Chip( 40 | label: new Text('${i} Name here'), 41 | deleteIconColor: Colors.red, 42 | deleteButtonTooltipMessage: 'Delete', 43 | onDeleted: () => _removeItem(key), 44 | avatar: new CircleAvatar( 45 | backgroundColor: Colors.grey.shade800, 46 | child: new Text(i.toString()), 47 | ), 48 | ), 49 | ); 50 | 51 | counter++; 52 | return child; 53 | } 54 | 55 | void _removeItem(Key key) { 56 | for(int i = 0; i < _list.length; i++) { 57 | Widget child = _list.elementAt(i); 58 | if(child.key == key) { 59 | setState(() => _list.removeAt(i)); 60 | print('Removing ${key.toString()}'); 61 | } 62 | } 63 | } 64 | 65 | @override 66 | Widget build(BuildContext context) { 67 | return new Scaffold( 68 | appBar: new AppBar( 69 | title: new Text('Name here'), 70 | ), 71 | floatingActionButton: new FloatingActionButton(onPressed: _onClicked, child: new Icon(Icons.add),), 72 | 73 | body: new Container( 74 | padding: new EdgeInsets.all(32.0), 75 | child: new Center( 76 | child: new Column( 77 | children: _list, 78 | ), 79 | ) 80 | ), 81 | ); 82 | } 83 | 84 | 85 | } 86 | -------------------------------------------------------------------------------- /47-wp-flutter-app/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial 2 | description: A new Flutter project. 3 | 4 | dependencies: 5 | flutter: 6 | sdk: flutter 7 | 8 | # The following adds the Cupertino Icons font to your application. 9 | # Use with the CupertinoIcons class for iOS style icons. 10 | cupertino_icons: ^0.1.2 11 | http: '>=0.11.3+12' 12 | # english_words: ^3.1.0 13 | transparent_image: ^0.1.0 14 | flutter_html_view: ^0.5.3 15 | 16 | dev_dependencies: 17 | flutter_test: 18 | sdk: flutter 19 | 20 | 21 | # For information on the generic Dart part of this file, see the 22 | # following page: https://www.dartlang.org/tools/pub/pubspec 23 | 24 | # The following section is specific to Flutter. 25 | flutter: 26 | 27 | # The following line ensures that the Material Icons font is 28 | # included with your application, so that you can use the icons in 29 | # the material Icons class. 30 | uses-material-design: true 31 | 32 | # To add assets to your application, add an assets section, like this: 33 | # assets: 34 | # - images/a_dot_burr.jpeg 35 | # - images/a_dot_ham.jpeg 36 | 37 | # An image asset can refer to one or more resolution-specific "variants", see 38 | # https://flutter.io/assets-and-images/#resolution-aware. 39 | 40 | # For details regarding adding assets from package dependencies, see 41 | # https://flutter.io/assets-and-images/#from-packages 42 | 43 | # To add custom fonts to your application, add a fonts section here, 44 | # in this "flutter" section. Each entry in this list should have a 45 | # "family" key with the font family name, and a "fonts" key with a 46 | # list giving the asset and other descriptors for the font. For 47 | # example: 48 | # fonts: 49 | # - family: Schyler 50 | # fonts: 51 | # - asset: fonts/Schyler-Regular.ttf 52 | # - asset: fonts/Schyler-Italic.ttf 53 | # style: italic 54 | # - family: Trajan Pro 55 | # fonts: 56 | # - asset: fonts/TrajanPro.ttf 57 | # - asset: fonts/TrajanPro_Bold.ttf 58 | # weight: 700 59 | # 60 | # For details regarding fonts from package dependencies, 61 | # see https://flutter.io/custom-fonts/#from-packages 62 | -------------------------------------------------------------------------------- /48-sliders-and-indicators/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | double _value = 0.0; 17 | 18 | void _onChanged(double value) => setState(() => _value = value); 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return new Scaffold( 23 | appBar: new AppBar( 24 | title: new Text('Name here'), 25 | ), 26 | body: new Container( 27 | padding: new EdgeInsets.all(32.0), 28 | child: new Center( 29 | child: new Column( 30 | children: [ 31 | new Slider(value: _value, onChanged: _onChanged), 32 | new Container( 33 | padding: new EdgeInsets.all(32.0), 34 | child: new LinearProgressIndicator( 35 | value: _value, 36 | //by default valueColor field is blue in color, here we are setting color manually 37 | valueColor: new AlwaysStoppedAnimation(Colors.green), 38 | ), 39 | ), 40 | new Container( 41 | padding: new EdgeInsets.all(32.0), 42 | child: new CircularProgressIndicator( 43 | value: _value, 44 | ), 45 | ) 46 | ], 47 | ), 48 | ) 49 | ), 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /49-popupmenu-button/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | enum Animals{Cat, Dog, Bird, Lizard, Fish} 15 | 16 | class _State extends State { 17 | 18 | Animals _selected = Animals.Cat; 19 | String _value = 'Make a Selection'; 20 | //List _items = new List(); 21 | List> _items = new List(); 22 | 23 | 24 | @override 25 | void initState() { 26 | for(Animals animal in Animals.values) { 27 | _items.add(new PopupMenuItem( 28 | child: new Text(_getDisplay(animal),), 29 | value: animal, 30 | )); 31 | } 32 | } 33 | 34 | void _onSelected(Animals animal) { 35 | setState((){ 36 | _selected = animal; 37 | _value = 'You Selected ${_getDisplay(animal)}'; 38 | }); 39 | } 40 | 41 | String _getDisplay(Animals animal) { 42 | int index = animal.toString().indexOf('.'); 43 | index++; 44 | return animal.toString().substring(index); 45 | } 46 | 47 | @override 48 | Widget build(BuildContext context) { 49 | return new Scaffold( 50 | appBar: new AppBar( 51 | title: new Text('Name here'), 52 | ), 53 | body: new Container( 54 | padding: new EdgeInsets.all(32.0), 55 | child: new Center( 56 | child: new Row( 57 | children: [ 58 | new Container( 59 | padding: new EdgeInsets.all(5.0), 60 | child: new Text(_value), 61 | ), 62 | new PopupMenuButton( 63 | child: new Icon(Icons.input), 64 | initialValue: Animals.Cat, 65 | onSelected: _onSelected, 66 | itemBuilder: (BuildContext context) { 67 | return _items; 68 | } 69 | ) 70 | ], 71 | ), 72 | ) 73 | ), 74 | ); 75 | } 76 | 77 | 78 | } 79 | -------------------------------------------------------------------------------- /50-timer-with-linearprogressbar/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | 5 | void main() { 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class _State extends State { 17 | 18 | static Duration duration = new Duration(milliseconds: 100); 19 | Timer timer; 20 | double _value = 0.0; 21 | bool _active = false; 22 | 23 | @override 24 | void initState() { 25 | 26 | /*the timer created in initState because it needs to exist in the state to 27 | operate as expected, the state of the timer does not need to be reinitialized 28 | on every build*/ 29 | 30 | timer = new Timer.periodic(duration, _timeout); //Timer.periodic(duration, callback func) 31 | } 32 | 33 | void _timeout(Timer timer) { 34 | if(!_active) return; 35 | setState((){ 36 | _value = _value + 0.01; 37 | if(_value == 1.0) _active = false; 38 | }); 39 | } 40 | 41 | void _onPressed() { 42 | setState(() { 43 | _value = 0.0; 44 | _active = true; 45 | }); 46 | } 47 | 48 | 49 | @override 50 | Widget build(BuildContext context) { 51 | return new Scaffold( 52 | appBar: new AppBar( 53 | title: new Text('Name here'), 54 | ), 55 | body: new Container( 56 | padding: new EdgeInsets.all(32.0), 57 | child: new Center( 58 | child: new Column( 59 | children: [ 60 | new Container( 61 | padding: new EdgeInsets.all(32.0), 62 | child: new LinearProgressIndicator(value: _value, backgroundColor: Colors.white,), 63 | ), 64 | new RaisedButton(onPressed: _onPressed, child: new Text('Start'),) 65 | ], 66 | ), 67 | ) 68 | ), 69 | ); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /51-ExpansionPanel/7677380631459189069.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/51-ExpansionPanel/7677380631459189069.png -------------------------------------------------------------------------------- /51-ExpansionPanel/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | //creating a class which holds the data of expansion panel list 15 | class MyItem { 16 | bool isExpanded; 17 | final String header; 18 | final Widget body; 19 | 20 | MyItem(this.isExpanded, this.header, this.body); 21 | } 22 | 23 | class _State extends State { 24 | 25 | List _items = new List(); 26 | 27 | 28 | @override 29 | void initState() { 30 | for(int i = 0 ; i< 10; i++) { 31 | _items.add(new MyItem( 32 | false, 33 | 'Item ${i}', 34 | new Container( 35 | padding: new EdgeInsets.all(10.0), 36 | child: new Text('Hello World'), 37 | ) 38 | )); 39 | } 40 | } 41 | 42 | //ExpansionPanel is a individual panel where as expansion list contains data 43 | ExpansionPanel _createitem(MyItem item) { 44 | return new ExpansionPanel( 45 | headerBuilder: (BuildContext context, bool isExpanded) { 46 | return new Container( 47 | padding: new EdgeInsets.all(5.0), 48 | child: new Text('Header ${item.header}'), 49 | ); 50 | }, 51 | body: item.body, 52 | isExpanded: item.isExpanded 53 | 54 | ); 55 | } 56 | 57 | @override 58 | Widget build(BuildContext context) { 59 | return new Scaffold( 60 | appBar: new AppBar( 61 | title: new Text('Name here'), 62 | ), 63 | body: new Container( 64 | padding: new EdgeInsets.all(32.0), 65 | child: new ListView( 66 | children: [ 67 | new ExpansionPanelList( 68 | expansionCallback: (int index, bool isExpanded) { 69 | setState(() { 70 | _items[index].isExpanded = !_items[index].isExpanded; 71 | }); 72 | }, 73 | children: _items.map(_createitem).toList(), 74 | ) 75 | ], 76 | ), 77 | ), 78 | ); 79 | } 80 | 81 | 82 | } 83 | -------------------------------------------------------------------------------- /52-TabBarView/4531018689106172362.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/52-TabBarView/4531018689106172362.png -------------------------------------------------------------------------------- /52-TabBarView/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class Choice { 15 | final String title; 16 | final IconData icon; 17 | 18 | const Choice({this.title, this.icon}); 19 | } 20 | 21 | class _State extends State with SingleTickerProviderStateMixin { 22 | 23 | TabController _controller; 24 | List _items = const [ 25 | const Choice(title: 'CAR', icon: Icons.directions_car), 26 | const Choice(title: 'BICYCLE', icon: Icons.directions_bike), 27 | const Choice(title: 'BOAT', icon: Icons.directions_boat), 28 | const Choice(title: 'BUS', icon: Icons.directions_bus), 29 | const Choice(title: 'TRAIN', icon: Icons.directions_railway), 30 | const Choice(title: 'WALK', icon: Icons.directions_walk), 31 | ]; 32 | 33 | 34 | @override 35 | void initState() { 36 | _controller = new TabController(length: _items.length, vsync: this); 37 | } 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | return new Scaffold( 42 | appBar: new AppBar( 43 | title: new Text('Name here'), 44 | bottom: new PreferredSize( 45 | preferredSize: const Size.fromHeight(48.0), 46 | child: new Theme( 47 | data: Theme.of(context).copyWith(accentColor: Colors.white), 48 | child: new Container( 49 | height: 48.0, 50 | alignment: Alignment.center, 51 | child: new TabPageSelector(controller: _controller,), 52 | ) 53 | ), 54 | 55 | ), 56 | ), 57 | body: new TabBarView( 58 | controller: _controller, 59 | children: _items.map((Choice item){ 60 | return new Container( 61 | padding: new EdgeInsets.all(25.0), 62 | child: new Center( 63 | child: new Column( 64 | children: [ 65 | new Text(item.title), 66 | new Icon(item.icon, size: 120.0,) 67 | ], 68 | ), 69 | ), 70 | 71 | ); 72 | }).toList(), 73 | ) 74 | ); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /53-Timeline-using-Stepper/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | List _steps; 17 | int _current; 18 | 19 | 20 | @override 21 | void initState() { 22 | _current = 0; 23 | _steps = [ 24 | //filling our _steps list 25 | new Step(title: new Text('Step 1'), content: new Text('Do Something'), isActive: true), 26 | new Step(title: new Text('Step 2'), content: new Text('Do Something'), isActive: false), 27 | new Step(title: new Text('Step 3'), content: new Text('Do Something'), isActive: false), //to disable a step set isActive to false 28 | ]; 29 | } 30 | 31 | void _stepContinue() { 32 | setState(() { 33 | _current++; 34 | if(_current >= _steps.length) _current = _steps.length - 1; 35 | }); 36 | } 37 | 38 | void _stepCancel() { 39 | setState(() { 40 | _current--; 41 | if(_current < 0) _current = 0; 42 | }); 43 | } 44 | 45 | // this will allow you to jump on steps without clicking continue/cancel each time 46 | void _stepTap(int index) { 47 | setState(() { 48 | _current = index; 49 | }); 50 | } 51 | 52 | @override 53 | Widget build(BuildContext context) { 54 | return new Scaffold( 55 | appBar: new AppBar( 56 | title: new Text('Name here'), 57 | ), 58 | body: new Container( 59 | padding: new EdgeInsets.all(32.0), 60 | child: new Center( 61 | //Stepper is a control that organizes steps within a process. 62 | child: new Stepper( 63 | steps: _steps, 64 | type: StepperType.vertical, 65 | currentStep: _current, 66 | onStepCancel: _stepCancel, 67 | onStepContinue: _stepContinue, 68 | onStepTapped: _stepTap, 69 | ) 70 | ) 71 | ), 72 | ); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /54-GridView/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class Area { 16 | int index; 17 | String name; 18 | Color color; 19 | Area({this.index: -1, this.name: 'Area', this.color: Colors.lightBlueAccent}); 20 | } 21 | 22 | class _State extends State { 23 | 24 | int _location; 25 | List _areas; 26 | 27 | 28 | @override 29 | void initState() { 30 | _areas = new List(); 31 | for(int i = 0; i< 16; i++) { 32 | _areas.add(new Area(index: i, name: 'Area ${i}')); 33 | } 34 | 35 | var rng = new Random(); 36 | _location = rng.nextInt(_areas.length); 37 | } 38 | 39 | Widget _generate(int index) { 40 | //GridTile is individual square that will go to gridview 41 | return new GridTile( 42 | child: new Container( 43 | padding: new EdgeInsets.all(5.0), 44 | child: new RaisedButton( 45 | onPressed: () => _onPressed(index), 46 | color: _areas[index].color, 47 | child: new Text(_areas[index].name, textAlign: TextAlign.center), 48 | 49 | ), 50 | ) 51 | ); 52 | } 53 | 54 | void _onPressed(int index) { 55 | setState((){ 56 | if(index == _location) { 57 | // if index==random location we found the treasure 58 | _areas[index].color = Colors.green; 59 | //You won 60 | } else { 61 | _areas[index].color = Colors.red; 62 | } 63 | }); 64 | } 65 | 66 | @override 67 | Widget build(BuildContext context) { 68 | return new Scaffold( 69 | appBar: new AppBar( 70 | title: new Text('Name here'), 71 | ), 72 | body: new Container( 73 | padding: new EdgeInsets.all(32.0), 74 | child: new Center( 75 | child: new GridView.count( 76 | crossAxisCount: 4, //no of tiles you want to show in a row 77 | children: new List.generate(16, _generate), 78 | ) 79 | ) 80 | ), 81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /55-Timeline-using-Stepper-with-TextField/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | List _steps; 17 | int _current; 18 | TextEditingController _name; 19 | TextEditingController _age; 20 | String _nameDisplay; 21 | String _ageDisplay; 22 | 23 | 24 | @override 25 | void initState() { 26 | super.initState(); 27 | _current = 0; 28 | _name = new TextEditingController(); 29 | _age = new TextEditingController(); 30 | } 31 | 32 | void _stepContinue() { 33 | setState((){ 34 | _current++; 35 | if(_current >= _steps.length) _current + _steps.length - 1; 36 | if(_current == 2) { 37 | _ageDisplay = _age.text; 38 | _nameDisplay = _name.text; 39 | } 40 | }); 41 | } 42 | 43 | void _stepCancel() { 44 | setState((){ 45 | _current--; 46 | if(_current < 0) _current = 0; 47 | }); 48 | } 49 | 50 | void _stepTap(int index) { 51 | setState((){ 52 | _current = index; 53 | }); 54 | } 55 | 56 | @override 57 | Widget build(BuildContext context) { 58 | return new Scaffold( 59 | appBar: new AppBar( 60 | title: new Text('Name here'), 61 | ), 62 | body: new Container( 63 | padding: new EdgeInsets.all(32.0), 64 | child: new Center( 65 | child: new Stepper( 66 | type: StepperType.vertical, 67 | steps: _steps = [ 68 | new Step( 69 | title: new Text('Step 1'), 70 | isActive: true, 71 | content: new Column( 72 | children: [ 73 | new TextField(controller: _name, decoration: new InputDecoration(labelText: 'Enter your name'),) 74 | ], 75 | ) 76 | ), 77 | new Step( 78 | title: new Text('Step 2'), 79 | isActive: true, 80 | content: new Column( 81 | children: [ 82 | new TextField( 83 | controller: _age, 84 | decoration: new InputDecoration(labelText: 'Enter your age'), 85 | keyboardType: TextInputType.number, 86 | ) 87 | ], 88 | ) 89 | ), 90 | new Step( 91 | title: new Text('Step 3'), 92 | content: new Column( 93 | children: [ 94 | new Text('You Entered:'), 95 | new Text('Your name is ${_nameDisplay}:'), 96 | new Text('Your age is ${_ageDisplay}:'), 97 | ], 98 | ) 99 | ), 100 | ], 101 | currentStep: _current, 102 | onStepTapped: _stepTap, 103 | onStepContinue: _stepContinue, 104 | onStepCancel: _stepCancel, 105 | ) 106 | ) 107 | ), 108 | ); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /56-charts/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'package:charts_flutter/flutter.dart' as charts; 4 | 5 | 6 | void main() { 7 | runApp(new MaterialApp( 8 | home: new MyApp(), 9 | )); 10 | } 11 | 12 | class MyApp extends StatefulWidget { 13 | @override 14 | _State createState() => new _State(); 15 | } 16 | 17 | class Sales { 18 | String year; 19 | int sales; 20 | Sales(this.year, this.sales); 21 | } 22 | 23 | class _State extends State { 24 | 25 | List _data; 26 | List> _chartdata; 27 | 28 | void _makeData() { 29 | _data = new List(); 30 | _chartdata = new List>(); 31 | 32 | final rnd = new Random(); 33 | for(int i = 2010; i < 2019; i++) { 34 | _data.add(new Sales(i.toString(), rnd.nextInt(1000))); 35 | } 36 | 37 | _chartdata.add(new charts.Series( 38 | id: 'Sales', 39 | colorFn: (_,__) => charts.MaterialPalette.red.shadeDefault, //set chart color 40 | data: _data, 41 | domainFn: (Sales sales, _) => sales.year, 42 | measureFn: (Sales sales, _) => sales.sales, 43 | fillPatternFn: (_,__) => charts.FillPatternType.forwardHatch, //chart fill pattern 44 | displayName: 'sales' 45 | ) 46 | ); 47 | 48 | } 49 | 50 | 51 | @override 52 | void initState() { 53 | _makeData(); 54 | } 55 | 56 | @override 57 | Widget build(BuildContext context) { 58 | return new Scaffold( 59 | appBar: new AppBar( 60 | title: new Text('Name here'), 61 | ), 62 | body: new Container( 63 | padding: new EdgeInsets.all(32.0), 64 | child: new Center( 65 | child: new Column( 66 | children: [ 67 | new Text('Sales Data'), 68 | new Expanded(child: new charts.BarChart(_chartdata)) 69 | ], 70 | ), 71 | ) 72 | ), 73 | ); 74 | } 75 | } -------------------------------------------------------------------------------- /56-charts/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | charts_flutter: ^0.4.0 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | 41 | # To add assets to your application, add an assets section, like this: 42 | # assets: 43 | # - images/a_dot_burr.jpeg 44 | # - images/a_dot_ham.jpeg 45 | 46 | # An image asset can refer to one or more resolution-specific "variants", see 47 | # https://flutter.io/assets-and-images/#resolution-aware. 48 | 49 | # For details regarding adding assets from package dependencies, see 50 | # https://flutter.io/assets-and-images/#from-packages 51 | 52 | # To add custom fonts to your application, add a fonts section here, 53 | # in this "flutter" section. Each entry in this list should have a 54 | # "family" key with the font family name, and a "fonts" key with a 55 | # list giving the asset and other descriptors for the font. For 56 | # example: 57 | # fonts: 58 | # - family: Schyler 59 | # fonts: 60 | # - asset: fonts/Schyler-Regular.ttf 61 | # - asset: fonts/Schyler-Italic.ttf 62 | # style: italic 63 | # - family: Trajan Pro 64 | # fonts: 65 | # - asset: fonts/TrajanPro.ttf 66 | # - asset: fonts/TrajanPro_Bold.ttf 67 | # weight: 700 68 | # 69 | # For details regarding fonts from package dependencies, 70 | # see https://flutter.io/custom-fonts/#from-packages 71 | -------------------------------------------------------------------------------- /57-grouping-charts-data/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'package:charts_flutter/flutter.dart' as charts; 4 | 5 | void main() { 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class Sales { 17 | String year; 18 | int sales; 19 | 20 | Sales(this.year,this.sales); 21 | } 22 | 23 | class _State extends State { 24 | 25 | List _laptops; 26 | List _desktops; 27 | List> _chartdata; 28 | 29 | 30 | void _makeData() { 31 | 32 | _laptops = new List(); 33 | _desktops = new List(); 34 | _chartdata = new List>(); 35 | 36 | final rnd = new Random(); 37 | for(int i = 2016; i < 2019; i++) { 38 | _laptops.add(new Sales(i.toString(), rnd.nextInt(1000))); 39 | _desktops.add(new Sales(i.toString(), rnd.nextInt(1000))); 40 | } 41 | 42 | _chartdata.add(new charts.Series( 43 | id: 'Sales', 44 | data: _laptops, 45 | domainFn: (Sales sales,__) => sales.year, 46 | measureFn: (Sales sales,__) => sales.sales, 47 | displayName: 'Sales', 48 | colorFn: (_,__) => charts.MaterialPalette.green.shadeDefault, 49 | )); 50 | 51 | _chartdata.add(new charts.Series( 52 | id: 'Sales', 53 | data: _desktops, 54 | domainFn: (Sales sales,__) => sales.year, 55 | measureFn: (Sales sales,__) => sales.sales, 56 | displayName: 'Sales', 57 | colorFn: (_,__) => charts.MaterialPalette.red.shadeDefault, 58 | )); 59 | 60 | } 61 | 62 | @override 63 | void initState() { 64 | _makeData(); 65 | } 66 | 67 | @override 68 | Widget build(BuildContext context) { 69 | return new Scaffold( 70 | appBar: new AppBar( 71 | title: new Text('Name here'), 72 | ), 73 | body: new Container( 74 | padding: new EdgeInsets.all(32.0), 75 | child: new Center( 76 | child: new Column( 77 | children: [ 78 | new Text('Add Widgets Here'), 79 | new Expanded(child: new charts.BarChart( 80 | _chartdata, 81 | vertical: false, 82 | )) 83 | ], 84 | ), 85 | ) 86 | ), 87 | ); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /57-grouping-charts-data/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | charts_flutter: ^0.4.0 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | 41 | # To add assets to your application, add an assets section, like this: 42 | # assets: 43 | # - images/a_dot_burr.jpeg 44 | # - images/a_dot_ham.jpeg 45 | 46 | # An image asset can refer to one or more resolution-specific "variants", see 47 | # https://flutter.io/assets-and-images/#resolution-aware. 48 | 49 | # For details regarding adding assets from package dependencies, see 50 | # https://flutter.io/assets-and-images/#from-packages 51 | 52 | # To add custom fonts to your application, add a fonts section here, 53 | # in this "flutter" section. Each entry in this list should have a 54 | # "family" key with the font family name, and a "fonts" key with a 55 | # list giving the asset and other descriptors for the font. For 56 | # example: 57 | # fonts: 58 | # - family: Schyler 59 | # fonts: 60 | # - asset: fonts/Schyler-Regular.ttf 61 | # - asset: fonts/Schyler-Italic.ttf 62 | # style: italic 63 | # - family: Trajan Pro 64 | # fonts: 65 | # - asset: fonts/TrajanPro.ttf 66 | # - asset: fonts/TrajanPro_Bold.ttf 67 | # weight: 700 68 | # 69 | # For details regarding fonts from package dependencies, 70 | # see https://flutter.io/custom-fonts/#from-packages 71 | -------------------------------------------------------------------------------- /58-pie-charts/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'package:charts_flutter/flutter.dart' as charts; 4 | 5 | void main() { 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class Sales { 17 | int year; 18 | int sales; 19 | charts.Color color; 20 | Sales(this.year,this.sales,this.color); 21 | } 22 | 23 | class _State extends State { 24 | 25 | List _data; 26 | List> _chartdata; 27 | 28 | 29 | void _makeData() { 30 | _chartdata = new List>(); 31 | _data = [ 32 | new Sales(0,100, charts.MaterialPalette.red.shadeDefault), 33 | new Sales(1,75, charts.MaterialPalette.blue.shadeDefault), 34 | new Sales(2,25, charts.MaterialPalette.green.shadeDefault), 35 | new Sales(3,5, charts.MaterialPalette.yellow.shadeDefault), 36 | ]; 37 | 38 | _chartdata.add(new charts.Series( 39 | id: 'Sales', 40 | data: _data, 41 | colorFn: (Sales sales,_) => sales.color, 42 | domainFn: (Sales sales,_) => sales.year, 43 | measureFn: (Sales sales,_) => sales.sales, 44 | )); 45 | } 46 | 47 | 48 | @override 49 | void initState() { 50 | _makeData(); 51 | } 52 | 53 | @override 54 | Widget build(BuildContext context) { 55 | return new Scaffold( 56 | appBar: new AppBar( 57 | title: new Text('Name here'), 58 | ), 59 | body: new Container( 60 | padding: new EdgeInsets.all(32.0), 61 | child: new Center( 62 | child: new Column( 63 | children: [ 64 | new Text('Sales Data'), 65 | new Expanded(child: new charts.PieChart( 66 | _chartdata, 67 | animate: true, 68 | animationDuration: new Duration(seconds: 5) 69 | )), 70 | 71 | ], 72 | ), 73 | ) 74 | ), 75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /58-pie-charts/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | charts_flutter: ^0.4.0 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | 41 | # To add assets to your application, add an assets section, like this: 42 | # assets: 43 | # - images/a_dot_burr.jpeg 44 | # - images/a_dot_ham.jpeg 45 | 46 | # An image asset can refer to one or more resolution-specific "variants", see 47 | # https://flutter.io/assets-and-images/#resolution-aware. 48 | 49 | # For details regarding adding assets from package dependencies, see 50 | # https://flutter.io/assets-and-images/#from-packages 51 | 52 | # To add custom fonts to your application, add a fonts section here, 53 | # in this "flutter" section. Each entry in this list should have a 54 | # "family" key with the font family name, and a "fonts" key with a 55 | # list giving the asset and other descriptors for the font. For 56 | # example: 57 | # fonts: 58 | # - family: Schyler 59 | # fonts: 60 | # - asset: fonts/Schyler-Regular.ttf 61 | # - asset: fonts/Schyler-Italic.ttf 62 | # style: italic 63 | # - family: Trajan Pro 64 | # fonts: 65 | # - asset: fonts/TrajanPro.ttf 66 | # - asset: fonts/TrajanPro_Bold.ttf 67 | # weight: 700 68 | # 69 | # For details regarding fonts from package dependencies, 70 | # see https://flutter.io/custom-fonts/#from-packages 71 | -------------------------------------------------------------------------------- /59-custom-widgets-using-stateful/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'mywidget.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class _State extends State { 16 | @override 17 | Widget build(BuildContext context) { 18 | return new Scaffold( 19 | appBar: new AppBar( 20 | title: new Text('Name here'), 21 | ), 22 | body: new Container( 23 | padding: new EdgeInsets.all(32.0), 24 | child: new Center( 25 | child: new Column( 26 | children: [ 27 | new Text('Add Widgets Here'), 28 | new MyWidget() 29 | ], 30 | ), 31 | ) 32 | ), 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /59-custom-widgets-using-stateful/lib/mywidget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class MyWidget extends StatelessWidget { 4 | 5 | @override 6 | Widget build(BuildContext context) { 7 | return new Container( 8 | padding: new EdgeInsets.all(32.0), 9 | child: new Text('Hello World'), 10 | ); 11 | } 12 | } -------------------------------------------------------------------------------- /59-custom-widgets-using-stateless/lib/clock.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | import 'package:intl/intl.dart'; 4 | 5 | class Clock extends StatefulWidget { 6 | @override 7 | _ClockState createState() => new _ClockState(); 8 | } 9 | 10 | class _ClockState extends State { 11 | 12 | String _value = 'Time Here'; 13 | Timer _timer; 14 | 15 | 16 | @override 17 | void initState() { 18 | _timer = new Timer.periodic(new Duration(seconds: 1), _onTimer); 19 | } 20 | 21 | void _onTimer(Timer timer) { 22 | var now = new DateTime.now(); 23 | var formatter = new DateFormat('hh:mm:ss'); 24 | String formatted = formatter.format(now); 25 | setState(() => _value = formatted); 26 | } 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return new Text(_value, style: new TextStyle(fontSize: 32.0),); 31 | } 32 | } -------------------------------------------------------------------------------- /59-custom-widgets-using-stateless/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'clock.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class _State extends State { 16 | @override 17 | Widget build(BuildContext context) { 18 | return new Scaffold( 19 | appBar: new AppBar( 20 | title: new Text('Name here'), 21 | ), 22 | body: new Container( 23 | padding: new EdgeInsets.all(32.0), 24 | child: new Center( 25 | child: new Column( 26 | children: [ 27 | new Text('Time is:'), 28 | new Clock() 29 | ], 30 | ), 31 | ) 32 | ), 33 | ); 34 | } 35 | } -------------------------------------------------------------------------------- /60-widgets-within-widgets/861017788426072585.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/60-widgets-within-widgets/861017788426072585.png -------------------------------------------------------------------------------- /60-widgets-within-widgets/lib/TimeCounter.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | import 'timedisplay.dart'; 4 | 5 | class TimeCounter extends StatefulWidget { 6 | @override 7 | _TimeCounterState createState() => new _TimeCounterState(); 8 | } 9 | 10 | class _TimeCounterState extends State { 11 | 12 | Stopwatch _watch; 13 | Timer _timer; 14 | Duration _duration; 15 | 16 | void _onStart() { 17 | setState(() { 18 | _watch = new Stopwatch(); 19 | _timer = new Timer.periodic(new Duration(milliseconds: 250), _onTimeOut); 20 | }); 21 | _watch.start(); 22 | } 23 | 24 | void _onStop() { 25 | _timer.cancel(); 26 | _watch.stop(); 27 | } 28 | 29 | void _onTimeOut(Timer timer) { 30 | if(!_watch.isRunning) return; 31 | setState(() => _duration = _watch.elapsed); 32 | } 33 | 34 | void _onClear(Duration value) { 35 | setState(() => _duration = new Duration()); 36 | } 37 | 38 | 39 | @override 40 | void initState() { 41 | _duration = new Duration(); 42 | } 43 | 44 | @override 45 | Widget build(BuildContext context) { 46 | return new Container( 47 | padding: new EdgeInsets.all(10.0), 48 | child: new Center( 49 | child: new Column( 50 | children: [ 51 | new TimeDisplay( 52 | color: Colors.red, 53 | duration: _duration, 54 | onClear: _onClear, 55 | ), 56 | new Row( 57 | mainAxisAlignment: MainAxisAlignment.center, 58 | children: [ 59 | new Padding( 60 | padding: new EdgeInsets.all(10.0), 61 | child: new RaisedButton(onPressed: _onStart, child: new Text('Start'),), 62 | ), 63 | new Padding( 64 | padding: new EdgeInsets.all(10.0), 65 | child: new RaisedButton(onPressed: _onStop, child: new Text('Stop'),), 66 | ) 67 | ], 68 | ) 69 | ], 70 | ), 71 | ), 72 | 73 | ); 74 | } 75 | } -------------------------------------------------------------------------------- /60-widgets-within-widgets/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'TimeCounter.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class _State extends State { 16 | @override 17 | Widget build(BuildContext context) { 18 | return new Scaffold( 19 | appBar: new AppBar( 20 | title: new Text('Name here'), 21 | ), 22 | body: new Container( 23 | padding: new EdgeInsets.all(32.0), 24 | child: new Center( 25 | child: new Column( 26 | children: [ 27 | new Text('My Stop Watch'), 28 | new TimeCounter() 29 | ], 30 | ), 31 | ) 32 | ), 33 | ); 34 | } 35 | } -------------------------------------------------------------------------------- /60-widgets-within-widgets/lib/timedisplay.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class TimeDisplay extends StatelessWidget { 4 | 5 | TimeDisplay({Key key,Color this.color, Duration this.duration, this.onClear}) : super(key: key); 6 | 7 | Duration duration = new Duration(); 8 | Color color = Colors.green; 9 | final ValueChanged onClear; 10 | 11 | void _onClicked() { 12 | onClear(duration); 13 | } 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | return new Row( 18 | mainAxisAlignment: MainAxisAlignment.center, 19 | children: [ 20 | new Padding( 21 | padding: new EdgeInsets.all(5.0), 22 | child: new Text(duration.toString(), style: new TextStyle(fontSize: 32.0, color: color),), 23 | ), 24 | new IconButton(icon: new Icon(Icons.clear), onPressed: _onClicked) 25 | 26 | ], 27 | ); 28 | } 29 | 30 | 31 | } -------------------------------------------------------------------------------- /61-child-to-parent/639017783384305142.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/61-child-to-parent/639017783384305142.png -------------------------------------------------------------------------------- /61-child-to-parent/lib/authenticator.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Authenticator extends StatefulWidget { 4 | Authenticator({Key key, this.onAuthenticated}); 5 | final ValueChanged onAuthenticated; 6 | 7 | @override 8 | _AuthenticatorState createState() => new _AuthenticatorState(onAuthenticated: onAuthenticated); 9 | } 10 | 11 | class _AuthenticatorState extends State { 12 | 13 | _AuthenticatorState({Key key, this.onAuthenticated}); 14 | 15 | TextEditingController _user; 16 | TextEditingController _pass; 17 | /*ValueChanged is a function signature of a Callable Class, a class that has a call() method 18 | You can use instances of that class like functions 19 | Dart has callable classes,and custom setters/getters so you can run an 20 | entire function everytime you access a value or everytime you write somewhere*/ 21 | final ValueChanged onAuthenticated; 22 | 23 | void _onPressed() { 24 | if(_user.text != 'user' || _pass.text != '1234') { 25 | onAuthenticated(false); // ValueChanged onAuthenticated is a function signature that's why this line is working like a function 26 | onAuthenticated(true); 27 | } 28 | } 29 | 30 | 31 | @override 32 | void initState() { 33 | _pass = new TextEditingController(); 34 | _user = new TextEditingController(); 35 | } 36 | 37 | @override 38 | Widget build(BuildContext context) { 39 | return new Card( 40 | child: new Padding( 41 | padding: new EdgeInsets.all(15.0), 42 | child: new Column( 43 | children: [ 44 | new TextField( 45 | controller: _user, 46 | decoration: new InputDecoration(labelText: 'Username'), 47 | ), 48 | new TextField( 49 | controller: _pass, 50 | decoration: new InputDecoration(labelText: 'Password'), 51 | obscureText: true, 52 | ), 53 | new Padding( 54 | padding: new EdgeInsets.all(10.0), 55 | child: new RaisedButton(onPressed: _onPressed, child: new Text('Login'),),) 56 | ], 57 | ), 58 | ), 59 | ); 60 | 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /61-child-to-parent/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'authenticator.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class _State extends State { 16 | 17 | bool _isAuthenticated; 18 | 19 | void _onAuthenticated(bool value) { 20 | setState(() => _isAuthenticated = value); 21 | } 22 | 23 | 24 | @override 25 | void initState() { 26 | _isAuthenticated = false; 27 | } 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return new Scaffold( 32 | appBar: new AppBar( 33 | title: new Text('Name here'), 34 | ), 35 | body: new Container( 36 | padding: new EdgeInsets.all(32.0), 37 | child: new Center( 38 | child: new Column( 39 | children: [ 40 | /* onAuthenticated is a callback is a method from another class 41 | that you can access and call to affect some change in the originating class*/ 42 | new Authenticator(onAuthenticated: _onAuthenticated,), 43 | new Text('Authenticated: ${_isAuthenticated}') 44 | ], 45 | ), 46 | ) 47 | ), 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /62-pushNamed/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | import './screens/third.dart'; 5 | 6 | void main() => runApp(new MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return new MaterialApp( 13 | title: 'Navigation', 14 | routes: { 15 | //All available pages 16 | '/Home': (BuildContext contrext) => new Home(), 17 | '/Second': (BuildContext contrext) => new Second(), 18 | '/Third': (BuildContext contrext) => new Third(), 19 | }, 20 | home: new Home(), //first page displayed 21 | ); 22 | } 23 | } -------------------------------------------------------------------------------- /62-pushNamed/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Home extends StatefulWidget { 4 | @override 5 | _HomeState createState() => new _HomeState(); 6 | } 7 | 8 | class _HomeState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Welcome Home'), 21 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Second');}, child: new Text('Next'),) 22 | ], 23 | ), 24 | ) 25 | ), 26 | ); 27 | } 28 | } -------------------------------------------------------------------------------- /62-pushNamed/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatefulWidget { 4 | @override 5 | _SecondState createState() => new _SecondState(); 6 | } 7 | 8 | class _SecondState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Second Page'), 21 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Third');}, child: new Text('Next'),), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Home');}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /62-pushNamed/lib/screens/third.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | 4 | class Third extends StatefulWidget { 5 | @override 6 | _ThirdState createState() => new _ThirdState(); 7 | } 8 | 9 | class _ThirdState extends State { 10 | @override 11 | Widget build(BuildContext context) { 12 | return new Scaffold( 13 | appBar: new AppBar( 14 | title: new Text('Name here'), 15 | ), 16 | body: new Container( 17 | padding: new EdgeInsets.all(32.0), 18 | child: new Center( 19 | child: new Column( 20 | children: [ 21 | new Text('Third Page'), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Second');}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /63-pushNamedUntilAndRemove/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | import './screens/third.dart'; 5 | 6 | void main() => runApp(new MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return new MaterialApp( 13 | title: 'Navigation', 14 | routes: { 15 | //All available pages 16 | '/Home': (BuildContext contrext) => new Home(), 17 | '/Second': (BuildContext contrext) => new Second(), 18 | '/Third': (BuildContext contrext) => new Third(), 19 | }, 20 | home: new Home(), //first page displayed 21 | ); 22 | } 23 | } -------------------------------------------------------------------------------- /63-pushNamedUntilAndRemove/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Home extends StatefulWidget { 4 | @override 5 | _HomeState createState() => new _HomeState(); 6 | } 7 | 8 | class _HomeState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Welcome Home'), 21 | //pushNamedAndRemoveUntil basically removes the back button e.g in second.dart you won't see any back button 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamedAndRemoveUntil('/Second', (Route route) => false);}, child: new Text('Next'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /63-pushNamedUntilAndRemove/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatefulWidget { 4 | @override 5 | _SecondState createState() => new _SecondState(); 6 | } 7 | 8 | class _SecondState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Second Page'), 21 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Third');}, child: new Text('Next'),), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Home');}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /63-pushNamedUntilAndRemove/lib/screens/third.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | 4 | class Third extends StatefulWidget { 5 | @override 6 | _ThirdState createState() => new _ThirdState(); 7 | } 8 | 9 | class _ThirdState extends State { 10 | @override 11 | Widget build(BuildContext context) { 12 | return new Scaffold( 13 | appBar: new AppBar( 14 | title: new Text('Name here'), 15 | ), 16 | body: new Container( 17 | padding: new EdgeInsets.all(32.0), 18 | child: new Center( 19 | child: new Column( 20 | children: [ 21 | new Text('Third Page'), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Second');}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /64-push-and-pop/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | import './screens/third.dart'; 5 | 6 | void main() => runApp(new MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return new MaterialApp( 13 | title: 'Navigation', 14 | routes: { 15 | //All available pages 16 | '/Home': (BuildContext contrext) => new Home(), 17 | '/Second': (BuildContext contrext) => new Second(), 18 | '/Third': (BuildContext contrext) => new Third(), 19 | }, 20 | home: new Home(), //first page displayed 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /64-push-and-pop/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Home extends StatefulWidget { 4 | @override 5 | _HomeState createState() => new _HomeState(); 6 | } 7 | 8 | class _HomeState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Welcome Home'), 21 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Second');}, child: new Text('Second'),), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Third');}, child: new Text('Third'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /64-push-and-pop/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatefulWidget { 4 | @override 5 | _SecondState createState() => new _SecondState(); 6 | } 7 | 8 | class _SecondState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Second Page'), 21 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamedAndRemoveUntil('/Third', (Route route) => false);}, child: new Text('Next'),), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pop();}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /64-push-and-pop/lib/screens/third.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Third extends StatefulWidget { 4 | @override 5 | _ThirdState createState() => new _ThirdState(); 6 | } 7 | 8 | class _ThirdState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Third Page'), 21 | new RaisedButton(onPressed: (){ 22 | if(Navigator.of(context).canPop()) { 23 | Navigator.of(context).pop(); 24 | } else { 25 | Navigator.of(context).pushNamed('/Second'); 26 | } 27 | 28 | }, child: new Text('Back'),) 29 | ], 30 | ), 31 | ) 32 | ), 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /65-navigating-from-a-child-widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | import './screens/third.dart'; 5 | 6 | void main() => runApp(new MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return new MaterialApp( 13 | title: 'Navigation', 14 | routes: { 15 | //All available pages 16 | '/Home': (BuildContext contrext) => new Home(), 17 | '/Second': (BuildContext contrext) => new Second(), 18 | '/Third': (BuildContext contrext) => new Third(), 19 | }, 20 | home: new Home(), //first page displayed 21 | ); 22 | } 23 | } -------------------------------------------------------------------------------- /65-navigating-from-a-child-widget/lib/mywidget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class MyWidget extends StatelessWidget { 4 | 5 | @override 6 | Widget build(BuildContext context) { 7 | return new Card( 8 | child: new Column( 9 | children: [ 10 | new Text('Click to navigate'), 11 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Home');}, child: new Text('Click me'),), 12 | ], 13 | ), 14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /65-navigating-from-a-child-widget/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Home extends StatefulWidget { 4 | @override 5 | _HomeState createState() => new _HomeState(); 6 | } 7 | 8 | class _HomeState extends State { 9 | @override 10 | Widget build(BuildContext context) { 11 | return new Scaffold( 12 | appBar: new AppBar( 13 | title: new Text('Name here'), 14 | ), 15 | body: new Container( 16 | padding: new EdgeInsets.all(32.0), 17 | child: new Center( 18 | child: new Column( 19 | children: [ 20 | new Text('Welcome Home'), 21 | //pushNamedAndRemoveUntil basically removes the back button e.g in second.dart you won't see any back button 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamedAndRemoveUntil('/Second', (Route route) => false);}, child: new Text('Next'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /65-navigating-from-a-child-widget/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import '../mywidget.dart'; 3 | 4 | class Second extends StatefulWidget { 5 | @override 6 | _SecondState createState() => new _SecondState(); 7 | } 8 | 9 | class _SecondState extends State { 10 | @override 11 | Widget build(BuildContext context) { 12 | return new Scaffold( 13 | appBar: new AppBar( 14 | title: new Text('Name here'), 15 | ), 16 | body: new Container( 17 | padding: new EdgeInsets.all(32.0), 18 | child: new Center( 19 | child: new Column( 20 | children: [ 21 | new Text('Second Page'), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Third');}, child: new Text('Next'),), 23 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Home');}, child: new Text('Back'),), 24 | /* 25 | Notice how MyWidget() also contains the route history even though it came 26 | from a widget. 27 | Doesn't matter where it is in your child hierarchy. 28 | It's going to use the same routing. 29 | Because everything extends from this widget right here my app 30 | everything's a part of this material app. 31 | */ 32 | new MyWidget(), 33 | ], 34 | ), 35 | ) 36 | ), 37 | ); 38 | } 39 | } -------------------------------------------------------------------------------- /65-navigating-from-a-child-widget/lib/screens/third.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | 4 | class Third extends StatefulWidget { 5 | @override 6 | _ThirdState createState() => new _ThirdState(); 7 | } 8 | 9 | class _ThirdState extends State { 10 | @override 11 | Widget build(BuildContext context) { 12 | return new Scaffold( 13 | appBar: new AppBar( 14 | title: new Text('Name here'), 15 | ), 16 | body: new Container( 17 | padding: new EdgeInsets.all(32.0), 18 | child: new Center( 19 | child: new Column( 20 | children: [ 21 | new Text('Third Page'), 22 | new RaisedButton(onPressed: (){Navigator.of(context).pushNamed('/Second');}, child: new Text('Back'),) 23 | ], 24 | ), 25 | ) 26 | ), 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /66-global-state/lib/code/GlobalState.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class GlobalState { 4 | final Map _data = {}; 5 | 6 | static GlobalState instance = new GlobalState._(); 7 | GlobalState._(); 8 | 9 | set(dynamic key,dynamic value) => _data[key] = value; 10 | get(dynamic key) => _data[key]; 11 | 12 | } -------------------------------------------------------------------------------- /66-global-state/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | 5 | 6 | void main() => runApp(new MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return new MaterialApp( 13 | title: 'Navigation', 14 | routes: { 15 | //All available pages 16 | '/Home': (BuildContext contrext) => new Home(), 17 | '/Second': (BuildContext contrext) => new Second(), 18 | }, 19 | home: new Home(), //first page displayed 20 | ); 21 | } 22 | } -------------------------------------------------------------------------------- /66-global-state/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import '../code/GlobalState.dart'; 3 | 4 | class Home extends StatefulWidget { 5 | @override 6 | _HomeState createState() => new _HomeState(); 7 | } 8 | 9 | class _HomeState extends State { 10 | 11 | TextEditingController _name; 12 | GlobalState _store = GlobalState.instance; 13 | 14 | 15 | @override 16 | void initState() { 17 | _name = new TextEditingController(); 18 | _store.set('name', ''); 19 | _name.text = _store.get('name'); 20 | } 21 | 22 | void _onPressed() { 23 | setState((){ 24 | _store.set('name', _name.text); 25 | }); 26 | Navigator.of(context).pushNamed('/Second'); 27 | } 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return new Scaffold( 32 | appBar: new AppBar( 33 | title: new Text('Name here'), 34 | ), 35 | body: new Container( 36 | padding: new EdgeInsets.all(32.0), 37 | child: new Center( 38 | child: new Column( 39 | children: [ 40 | new TextField( 41 | controller: _name, 42 | decoration: new InputDecoration(labelText: 'Enter your name'), 43 | ), 44 | new RaisedButton(onPressed: _onPressed, child: new Text('Next'),) 45 | ], 46 | ), 47 | ) 48 | ), 49 | ); 50 | } 51 | } -------------------------------------------------------------------------------- /66-global-state/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import '../code/GlobalState.dart'; 3 | 4 | class Second extends StatefulWidget { 5 | @override 6 | _SecondState createState() => new _SecondState(); 7 | } 8 | 9 | class _SecondState extends State { 10 | 11 | GlobalState _store = GlobalState.instance; 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return new Scaffold( 16 | appBar: new AppBar( 17 | title: new Text('Name here'), 18 | ), 19 | body: new Container( 20 | padding: new EdgeInsets.all(32.0), 21 | child: new Center( 22 | child: new Column( 23 | children: [ 24 | new Text('Hello ${_store.get('name')}'), 25 | 26 | new RaisedButton(onPressed: (){Navigator.of(context).pop();}, child: new Text('Back'),) 27 | ], 28 | ), 29 | ) 30 | ), 31 | ); 32 | } 33 | } -------------------------------------------------------------------------------- /67-passing-variables/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import './screens/home.dart'; 3 | import './screens/second.dart'; 4 | 5 | /*global state method is the best way of passing data instead 6 | of this example, we can do it like this but often times it breaks 7 | code if you use in some other app, this way isn't bad but it's also not the best*/ 8 | void main() => runApp(new MyApp()); 9 | 10 | class MyApp extends StatelessWidget { 11 | 12 | @override 13 | Widget build(BuildContext context) { 14 | return new MaterialApp( 15 | title: 'Navigation', 16 | routes: { 17 | //All available pages 18 | '/Home': (BuildContext contrext) => new Home(), 19 | '/Second': (BuildContext contrext) => new Second(), 20 | }, 21 | home: new Home(), //first page displayed 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /67-passing-variables/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'second.dart'; 3 | 4 | class Home extends StatefulWidget { 5 | @override 6 | _HomeState createState() => new _HomeState(); 7 | } 8 | 9 | class _HomeState extends State { 10 | 11 | TextEditingController _name; 12 | 13 | 14 | @override 15 | void initState() { 16 | _name = new TextEditingController(); 17 | } 18 | 19 | void _onPressed() { 20 | 21 | // Navigator.of(context).pushNamed('/Second'); 22 | Navigator.push(context, new MaterialPageRoute( 23 | builder: (BuildContext context) => new Second(_name.text), 24 | )); 25 | } 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return new Scaffold( 30 | appBar: new AppBar( 31 | title: new Text('Name here'), 32 | ), 33 | body: new Container( 34 | padding: new EdgeInsets.all(32.0), 35 | child: new Center( 36 | child: new Column( 37 | children: [ 38 | new TextField( 39 | controller: _name, 40 | decoration: new InputDecoration(labelText: 'Enter your name'), 41 | ), 42 | new RaisedButton(onPressed: _onPressed, child: new Text('Next'),) 43 | ], 44 | ), 45 | ) 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /67-passing-variables/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatefulWidget { 4 | Second(this.name); 5 | String name; 6 | @override 7 | _SecondState createState() => new _SecondState(name); 8 | } 9 | 10 | class _SecondState extends State { 11 | _SecondState(this.name); 12 | String name; 13 | 14 | @override 15 | Widget build(BuildContext context) { 16 | return new Scaffold( 17 | appBar: new AppBar( 18 | title: new Text('Name here'), 19 | ), 20 | body: new Container( 21 | padding: new EdgeInsets.all(32.0), 22 | child: new Center( 23 | child: new Column( 24 | children: [ 25 | new Text('Hello ${name}'), 26 | 27 | new RaisedButton(onPressed: (){Navigator.of(context).pop();}, child: new Text('Back'),) 28 | ], 29 | ), 30 | ) 31 | ), 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /68-redux/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_redux/flutter_redux.dart'; 3 | import 'package:redux/redux.dart'; 4 | //Redux 5 | 6 | // https://pub.dartlang.org/packages/redux 7 | // https://pub.dartlang.org/packages/flutter_redux 8 | 9 | // MUST USE DART 2!!!! 10 | // Add additional params 11 | // --preview-dart-2 12 | 13 | //Actions for redux, these are the things we do 14 | enum Actions { Increment, Decrement } 15 | 16 | //The reducer will take the action and create a new state and does nothing in the existing 17 | int reducer(int state, dynamic action) { 18 | if (action == Actions.Increment) state++; 19 | if (action == Actions.Decrement) state--; 20 | 21 | return state; 22 | } 23 | 24 | 25 | void main() { 26 | final store = new Store(reducer, initialState: 0); 27 | 28 | runApp(new MyApp( 29 | store: store, 30 | )); 31 | 32 | } 33 | 34 | //Stateless because redux is handling the state, but we can mix them 35 | class MyApp extends StatelessWidget { 36 | MyApp({Key key, this.store}) : super(key: key); 37 | final Store store; 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | return new StoreProvider( 42 | store: store, 43 | child: new MaterialApp( 44 | title: 'Flutter Redux', 45 | home: new Scaffold( 46 | appBar: new AppBar( 47 | title: new Text('Redux App'), 48 | ), 49 | body: new Container( 50 | padding: new EdgeInsets.all(32.0), 51 | child: new Center( 52 | child: new Column( 53 | children: [ 54 | 55 | //Make a connector to get the updates when the store changes 56 | new StoreConnector( 57 | converter: (store) => store.state.toString(), 58 | builder: (context, count) { 59 | return new Text( 60 | count, 61 | style: new TextStyle(fontSize: 24.0) 62 | ); 63 | }, 64 | 65 | ), 66 | 67 | new Row( 68 | mainAxisAlignment: MainAxisAlignment.center, 69 | children: [ 70 | new IconButton(icon: new Icon(Icons.add), onPressed: ()=> store.dispatch(Actions.Increment)), 71 | new IconButton(icon: new Icon(Icons.remove), onPressed: ()=> store.dispatch(Actions.Decrement)), 72 | ], 73 | ), 74 | 75 | 76 | ], 77 | ), 78 | ) 79 | ), 80 | ), 81 | ) 82 | ); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /68-redux/lib/screens/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'second.dart'; 3 | 4 | class Home extends StatefulWidget { 5 | @override 6 | _HomeState createState() => new _HomeState(); 7 | } 8 | 9 | class _HomeState extends State { 10 | 11 | TextEditingController _name; 12 | 13 | 14 | @override 15 | void initState() { 16 | _name = new TextEditingController(); 17 | } 18 | 19 | void _onPressed() { 20 | 21 | // Navigator.of(context).pushNamed('/Second'); 22 | Navigator.push(context, new MaterialPageRoute( 23 | builder: (BuildContext context) => new Second(_name.text), 24 | )); 25 | } 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return new Scaffold( 30 | appBar: new AppBar( 31 | title: new Text('Name here'), 32 | ), 33 | body: new Container( 34 | padding: new EdgeInsets.all(32.0), 35 | child: new Center( 36 | child: new Column( 37 | children: [ 38 | new TextField( 39 | controller: _name, 40 | decoration: new InputDecoration(labelText: 'Enter your name'), 41 | ), 42 | new RaisedButton(onPressed: _onPressed, child: new Text('Next'),) 43 | ], 44 | ), 45 | ) 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /68-redux/lib/screens/second.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Second extends StatefulWidget { 4 | Second(this.name); 5 | String name; 6 | @override 7 | _SecondState createState() => new _SecondState(name); 8 | } 9 | 10 | class _SecondState extends State { 11 | _SecondState(this.name); 12 | String name; 13 | 14 | @override 15 | Widget build(BuildContext context) { 16 | return new Scaffold( 17 | appBar: new AppBar( 18 | title: new Text('Name here'), 19 | ), 20 | body: new Container( 21 | padding: new EdgeInsets.all(32.0), 22 | child: new Center( 23 | child: new Column( 24 | children: [ 25 | new Text('Hello ${name}'), 26 | 27 | new RaisedButton(onPressed: (){Navigator.of(context).pop();}, child: new Text('Back'),) 28 | ], 29 | ), 30 | ) 31 | ), 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /68-redux/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | redux: "^3.0.0" 24 | flutter_redux: "^0.5.0" 25 | 26 | dev_dependencies: 27 | flutter_test: 28 | sdk: flutter 29 | 30 | 31 | # For information on the generic Dart part of this file, see the 32 | # following page: https://www.dartlang.org/tools/pub/pubspec 33 | 34 | # The following section is specific to Flutter. 35 | flutter: 36 | 37 | # The following line ensures that the Material Icons font is 38 | # included with your application, so that you can use the icons in 39 | # the material Icons class. 40 | uses-material-design: true 41 | 42 | # To add assets to your application, add an assets section, like this: 43 | # assets: 44 | # - images/a_dot_burr.jpeg 45 | # - images/a_dot_ham.jpeg 46 | 47 | # An image asset can refer to one or more resolution-specific "variants", see 48 | # https://flutter.io/assets-and-images/#resolution-aware. 49 | 50 | # For details regarding adding assets from package dependencies, see 51 | # https://flutter.io/assets-and-images/#from-packages 52 | 53 | # To add custom fonts to your application, add a fonts section here, 54 | # in this "flutter" section. Each entry in this list should have a 55 | # "family" key with the font family name, and a "fonts" key with a 56 | # list giving the asset and other descriptors for the font. For 57 | # example: 58 | # fonts: 59 | # - family: Schyler 60 | # fonts: 61 | # - asset: fonts/Schyler-Regular.ttf 62 | # - asset: fonts/Schyler-Italic.ttf 63 | # style: italic 64 | # - family: Trajan Pro 65 | # fonts: 66 | # - asset: fonts/TrajanPro.ttf 67 | # - asset: fonts/TrajanPro_Bold.ttf 68 | # weight: 700 69 | # 70 | # For details regarding fonts from package dependencies, 71 | # see https://flutter.io/custom-fonts/#from-packages 72 | -------------------------------------------------------------------------------- /69-opacity/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | bool _visible; 17 | 18 | 19 | @override 20 | void initState() { 21 | _visible = true; 22 | } 23 | 24 | void _toggleVisible() { 25 | setState(() { 26 | _visible = !_visible; 27 | }); 28 | } 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return new Scaffold( 33 | appBar: new AppBar( 34 | title: new Text('Name here'), 35 | ), 36 | body: new Container( 37 | padding: new EdgeInsets.all(32.0), 38 | child: new Column( 39 | children: [ 40 | new Opacity(opacity: _visible ? 1.0 : 0.2, //changes opacity based on _toggleVisible() 41 | child: new Text('Now you see me now you don\'t!')), 42 | new RaisedButton(onPressed: _toggleVisible, child: new Text('Toggle'),) 43 | ], 44 | ), 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /70-rotated-box/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | int _turns; 17 | double _value; 18 | 19 | 20 | @override 21 | void initState() { 22 | _turns = 0; 23 | _value = 0.0; 24 | } 25 | 26 | void _onChanged(double value) { 27 | setState(() { 28 | _value = value; 29 | _turns = value.toInt(); 30 | }); 31 | } 32 | 33 | @override 34 | Widget build(BuildContext context) { 35 | return new Scaffold( 36 | appBar: new AppBar( 37 | title: new Text('Name here'), 38 | ), 39 | body: new Container( 40 | padding: new EdgeInsets.all(32.0), 41 | child: new Center( 42 | child: new Column( 43 | children: [ 44 | new Slider(value: _value, onChanged: _onChanged, min: 0.0, max: 4.0,), 45 | new RotatedBox(quarterTurns: _turns, 46 | child: new Text('Hello World'),) 47 | ], 48 | ), 49 | ) 50 | ), 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /71-box-decoration/images/smile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/71-box-decoration/images/smile.png -------------------------------------------------------------------------------- /71-box-decoration/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | @override 16 | Widget build(BuildContext context) { 17 | return new Scaffold( 18 | appBar: new AppBar( 19 | title: new Text('Name here'), 20 | ), 21 | body: new Container( 22 | padding: new EdgeInsets.all(32.0), 23 | child: new Center( 24 | child: new Column( 25 | children: [ 26 | new Text('Sun Shine'), 27 | new Container( 28 | child: new Image(image: new AssetImage('images/smile.png')), 29 | padding: new EdgeInsets.all(32.0), 30 | decoration: new BoxDecoration( 31 | border: new Border.all(color: Colors.orange, width: 2.0), 32 | gradient: new RadialGradient(colors: [Colors.red,Colors.yellow]) 33 | ), 34 | ) 35 | 36 | ], 37 | ), 38 | ) 39 | ), 40 | ); 41 | } 42 | } -------------------------------------------------------------------------------- /71-box-decoration/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | redux: "^3.0.0" 24 | flutter_redux: "^0.5.0" 25 | 26 | dev_dependencies: 27 | flutter_test: 28 | sdk: flutter 29 | 30 | 31 | # For information on the generic Dart part of this file, see the 32 | # following page: https://www.dartlang.org/tools/pub/pubspec 33 | 34 | # The following section is specific to Flutter. 35 | flutter: 36 | 37 | # The following line ensures that the Material Icons font is 38 | # included with your application, so that you can use the icons in 39 | # the material Icons class. 40 | uses-material-design: true 41 | assets: 42 | - images/smile.png 43 | 44 | # An image asset can refer to one or more resolution-specific "variants", see 45 | # https://flutter.io/assets-and-images/#resolution-aware. 46 | 47 | # For details regarding adding assets from package dependencies, see 48 | # https://flutter.io/assets-and-images/#from-packages 49 | 50 | # To add custom fonts to your application, add a fonts section here, 51 | # in this "flutter" section. Each entry in this list should have a 52 | # "family" key with the font family name, and a "fonts" key with a 53 | # list giving the asset and other descriptors for the font. For 54 | # example: 55 | # fonts: 56 | # - family: Schyler 57 | # fonts: 58 | # - asset: fonts/Schyler-Regular.ttf 59 | # - asset: fonts/Schyler-Italic.ttf 60 | # style: italic 61 | # - family: Trajan Pro 62 | # fonts: 63 | # - asset: fonts/TrajanPro.ttf 64 | # - asset: fonts/TrajanPro_Bold.ttf 65 | # weight: 700 66 | # 67 | # For details regarding fonts from package dependencies, 68 | # see https://flutter.io/custom-fonts/#from-packages 69 | -------------------------------------------------------------------------------- /72-transformations/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State { 15 | 16 | double _x; 17 | double _y; 18 | double _z; 19 | 20 | 21 | @override 22 | void initState() { 23 | _x = 0.0; 24 | _y = 0.0; 25 | _z = 0.0; 26 | } 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return new Scaffold( 31 | appBar: new AppBar( 32 | title: new Text('Name here'), 33 | ), 34 | body: new Container( 35 | padding: new EdgeInsets.all(32.0), 36 | child: new Center( 37 | child: new Column( 38 | children: [ 39 | new Row(children: [ 40 | new Text('X'), 41 | new Slider(value: _x, onChanged: (double value) => setState(() => _x = value)) 42 | ],), 43 | new Row(children: [ 44 | new Text('Y'), 45 | new Slider(value: _y, onChanged: (double value) => setState(() => _y = value)) 46 | ],), 47 | new Row(children: [ 48 | new Text('Z'), 49 | new Slider(value: _z, onChanged: (double value) => setState(() => _z = value)) 50 | ],), 51 | new Transform(transform: new Matrix4.skewY(_y), 52 | child: new Transform(transform: new Matrix4.skewX(_x), 53 | child: new Transform(transform: new Matrix4.rotationZ(_z), 54 | child: new Padding(padding: new EdgeInsets.all(10.0), child: new Text('hello World'),),),), 55 | ) 56 | ], 57 | ), 58 | ) 59 | ), 60 | ); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /73-custompainter/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _painter extends CustomPainter { 15 | 16 | @override 17 | void paint(Canvas canvas, Size size) { 18 | //All our work will be done 19 | 20 | final radius = 100.0; 21 | final Offset offset = new Offset(0.0, 75.0); 22 | final Paint paint = new Paint() 23 | ..isAntiAlias = true 24 | ..strokeWidth = 10.0 25 | ..color = Colors.blue[500] 26 | ..style = PaintingStyle.stroke; 27 | 28 | final Offset bodystart = new Offset(0.0, 50.0); 29 | final Offset bodyend = new Offset(0.0, 0.0); 30 | 31 | canvas.drawCircle(offset, radius, paint); 32 | canvas.drawLine(bodystart, bodyend, paint); 33 | 34 | final Rect rect = new Rect.fromCircle(center: offset, radius: radius); 35 | final Paint rectpaint = new Paint() 36 | ..isAntiAlias = true 37 | ..strokeWidth = 10.0 38 | ..color = Colors.orange 39 | ..style = PaintingStyle.stroke; 40 | 41 | canvas.drawRect(rect, rectpaint); 42 | } 43 | 44 | @override 45 | bool shouldRepaint(CustomPainter oldDelegate) { 46 | //shouldRepaint checks to see if it is dirty and repaint everytime it changes and chew up the battery 47 | return false; 48 | } 49 | } 50 | 51 | class _State extends State { 52 | @override 53 | Widget build(BuildContext context) { 54 | return new Scaffold( 55 | appBar: new AppBar( 56 | title: new Text('Name here'), 57 | ), 58 | body: new Container( 59 | padding: new EdgeInsets.all(32.0), 60 | child: new Center( 61 | child: new Column( 62 | children: [ 63 | 64 | new CustomPaint(painter: new _painter(),), 65 | new Text('Hello', style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),), 66 | ], 67 | ), 68 | ) 69 | ), 70 | ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /74-tween-animations/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/animation.dart'; 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State with SingleTickerProviderStateMixin{ 15 | 16 | /* 17 | * animation typically typically have a sequence of numbers or a list of 18 | * numbers that you are going to modify over time, animation itself is the 19 | * individual number that changes over time 20 | * 21 | * animation controller is the time at which that sequence is changed 22 | * */ 23 | Animation animation; 24 | AnimationController controller; 25 | 26 | @override 27 | void initState() { 28 | super.initState(); 29 | 30 | controller = new AnimationController( duration: const Duration(milliseconds: 5000),vsync: this); 31 | animation = new Tween(begin: 0.0, end: 400.0).animate(controller); 32 | animation.addListener(() { 33 | setState(() { 34 | //The state of the animation has changed e.g you want to add different animation effect at number 255 35 | }); 36 | }); 37 | 38 | controller.forward(); 39 | } 40 | 41 | // we need to dispose our controller once the animation is done otherwise it will chew up the battery and seems your app is hung up 42 | @override 43 | void dispose() { 44 | controller.dispose(); 45 | super.dispose(); 46 | } 47 | 48 | @override 49 | Widget build(BuildContext context) { 50 | return new Scaffold( 51 | appBar: new AppBar( 52 | title: new Text('Name here'), 53 | ), 54 | body: new Container( 55 | padding: new EdgeInsets.all(32.0), 56 | height: animation.value, 57 | width: animation.value, 58 | child: new Center( 59 | child: new FlutterLogo(size: 300.0,) 60 | ) 61 | ), 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /75-animation-builder/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State with SingleTickerProviderStateMixin{ 15 | 16 | /* 17 | * animation typically typically have a sequence of numbers or a list of 18 | * numbers that you are going to modify over time, animation itself is the 19 | * individual number that changes over time 20 | * 21 | * animation controller is the time at which that sequence is changed 22 | * */ 23 | Animation animation; 24 | AnimationController controller; 25 | 26 | @override 27 | void initState() { 28 | super.initState(); 29 | 30 | controller = new AnimationController( duration: const Duration(milliseconds: 10000),vsync: this); 31 | final CurvedAnimation curve = new CurvedAnimation(parent: controller, curve: Curves.bounceIn); 32 | animation = new Tween(begin: 0.0, end: 300.0).animate(curve); 33 | 34 | controller.forward(); 35 | } 36 | 37 | Widget builder(BuildContext context, Widget child){ 38 | return new Container( 39 | height: animation.value, 40 | width: animation.value, 41 | child: new FlutterLogo() 42 | ); 43 | } 44 | 45 | // we need to dispose our controller once the animation is done otherwise it will chew up the battery and seems your app is hung up 46 | @override 47 | void dispose() { 48 | controller.dispose(); 49 | super.dispose(); 50 | } 51 | 52 | @override 53 | Widget build(BuildContext context) { 54 | return new Scaffold( 55 | appBar: new AppBar( 56 | title: new Text('Name here'), 57 | ), 58 | body: new Container( 59 | padding: new EdgeInsets.all(32.0), 60 | child: new Center( 61 | child: new AnimatedBuilder(animation: animation, builder: builder), 62 | ) 63 | ), 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /76-listener/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(new MaterialApp( 5 | home: new MyApp(), 6 | )); 7 | } 8 | 9 | class MyApp extends StatefulWidget { 10 | @override 11 | _State createState() => new _State(); 12 | } 13 | 14 | class _State extends State with SingleTickerProviderStateMixin{ 15 | 16 | /* 17 | * animation typically typically have a sequence of numbers or a list of 18 | * numbers that you are going to modify over time, animation itself is the 19 | * individual number that changes over time 20 | * 21 | * animation controller is the time at which that sequence is changed 22 | * */ 23 | Animation animation; 24 | AnimationController controller; 25 | 26 | @override 27 | void initState() { 28 | super.initState(); 29 | 30 | controller = new AnimationController( duration: const Duration(milliseconds: 10000),vsync: this); 31 | final CurvedAnimation curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn); 32 | animation = new Tween(begin: 100.0, end: 300.0).animate(curve); 33 | animation.addStatusListener(listener); 34 | 35 | controller.forward(); 36 | } 37 | 38 | //triggering animation based on animation state 39 | void listener(AnimationStatus status){ 40 | if(status == AnimationStatus.completed) { 41 | controller.reverse(); 42 | } else if(status == AnimationStatus.dismissed) { 43 | controller.forward(); 44 | } 45 | } 46 | 47 | //we are not animating the logo we are animating the container and logo is simply matching the size 48 | Widget builder(BuildContext context, Widget child){ 49 | return new Container( 50 | height: animation.value, 51 | width: animation.value, 52 | child: new FlutterLogo() 53 | ); 54 | } 55 | 56 | // we need to dispose our controller once the animation is done otherwise it will chew up the battery and seems your app is hung up 57 | @override 58 | void dispose() { 59 | controller.dispose(); 60 | super.dispose(); 61 | } 62 | 63 | @override 64 | Widget build(BuildContext context) { 65 | return new Scaffold( 66 | appBar: new AppBar( 67 | title: new Text('Name here'), 68 | ), 69 | body: new Container( 70 | padding: new EdgeInsets.all(32.0), 71 | child: new Center( 72 | child: new AnimatedBuilder(animation: animation, builder: builder), 73 | ) 74 | ), 75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /77-animated-widgets/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/animation.dart'; 3 | 4 | void main() { 5 | runApp(new MaterialApp( 6 | home: new MyApp(), 7 | )); 8 | } 9 | 10 | class MyApp extends StatefulWidget { 11 | @override 12 | _State createState() => new _State(); 13 | } 14 | 15 | class AnimatedLogo extends AnimatedWidget{ 16 | 17 | static final _opactityTween = new Tween(begin: 0.1, end: 1.0); 18 | static final _sizeTween = new Tween(begin: 0.0, end: 300.0); 19 | static final _rotateTween = new Tween(begin: 0.0, end: 12.0); 20 | 21 | AnimatedLogo({Key key, Animation animation}) : super(key: key,listenable: animation); 22 | 23 | Widget build(BuildContext context) { 24 | final Animation animation = listenable; 25 | 26 | return new Center( 27 | child: new Transform.rotate(angle: _rotateTween.evaluate(animation), 28 | child: new Opacity(opacity: _opactityTween.evaluate(animation), 29 | child: new Container( 30 | margin: new EdgeInsets.symmetric(vertical: 10.0), 31 | height: _sizeTween.evaluate(animation), 32 | width: _sizeTween.evaluate(animation), 33 | child: new FlutterLogo(), 34 | ),),), 35 | ); 36 | } 37 | } 38 | 39 | class _State extends State with SingleTickerProviderStateMixin{ 40 | 41 | /* 42 | * animation typically typically have a sequence of numbers or a list of 43 | * numbers that you are going to modify over time, animation itself is the 44 | * individual number that changes over time 45 | * 46 | * animation controller is the time at which that sequence is changed 47 | * */ 48 | Animation animation; 49 | AnimationController controller; 50 | 51 | @override 52 | void initState() { 53 | super.initState(); 54 | 55 | controller = new AnimationController( duration: const Duration(milliseconds: 2000),vsync: this); 56 | animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn); 57 | 58 | animation.addStatusListener(listener); 59 | controller.forward(); 60 | } 61 | 62 | //triggering animation based on animation state 63 | void listener(AnimationStatus status){ 64 | if(status == AnimationStatus.completed) { 65 | controller.reverse(); 66 | } else if(status == AnimationStatus.dismissed) { 67 | controller.forward(); 68 | } 69 | } 70 | 71 | Widget builder(BuildContext context, Widget child){ 72 | return new Container( 73 | height: animation.value, 74 | width: animation.value, 75 | child: new FlutterLogo() 76 | ); 77 | } 78 | 79 | // we need to dispose our controller once the animation is done otherwise it will chew up the battery and seems your app is hung up 80 | @override 81 | void dispose() { 82 | controller.dispose(); 83 | super.dispose(); 84 | } 85 | 86 | @override 87 | Widget build(BuildContext context) { 88 | return new Scaffold( 89 | appBar: new AppBar( 90 | title: new Text('Name here'), 91 | ), 92 | body: new Container( 93 | padding: new EdgeInsets.all(32.0), 94 | child: new AnimatedLogo(animation: animation,), 95 | ), 96 | ); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /78-display-a-map/7145080177470288259.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/78-display-a-map/7145080177470288259.png -------------------------------------------------------------------------------- /78-display-a-map/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_map/flutter_map.dart'; 3 | import 'package:latlong/latlong.dart'; 4 | 5 | void main(){ 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class _State extends State{ 17 | @override 18 | Widget build(BuildContext context) { 19 | return new Scaffold( 20 | appBar: new AppBar( 21 | title: new Text('Name here'), 22 | ), 23 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 24 | body: new Container( 25 | padding: new EdgeInsets.all(32.0), 26 | child: new Center( 27 | child: new Column( 28 | children: [ 29 | new Flexible( 30 | child: new FlutterMap( 31 | options: new MapOptions( 32 | center: new LatLng(41.8781, -87.6298), 33 | zoom: 10.0 34 | ), 35 | //openmap uses layers so we have to provide it otherwise you get errors 36 | //the caching for open map is not same as google map but its good for open src projects 37 | layers: [ 38 | new TileLayerOptions( 39 | urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 40 | subdomains: ['a','b','c'], 41 | ) 42 | ], 43 | ), 44 | ) 45 | ], 46 | ), 47 | ), 48 | ), 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /78-display-a-map/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | flutter_map: ^0.1.3 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | # assets: 41 | # - images/smile.png 42 | 43 | # An image asset can refer to one or more resolution-specific "variants", see 44 | # https://flutter.io/assets-and-images/#resolution-aware. 45 | 46 | # For details regarding adding assets from package dependencies, see 47 | # https://flutter.io/assets-and-images/#from-packages 48 | 49 | # To add custom fonts to your application, add a fonts section here, 50 | # in this "flutter" section. Each entry in this list should have a 51 | # "family" key with the font family name, and a "fonts" key with a 52 | # list giving the asset and other descriptors for the font. For 53 | # example: 54 | # fonts: 55 | # - family: Schyler 56 | # fonts: 57 | # - asset: fonts/Schyler-Regular.ttf 58 | # - asset: fonts/Schyler-Italic.ttf 59 | # style: italic 60 | # - family: Trajan Pro 61 | # fonts: 62 | # - asset: fonts/TrajanPro.ttf 63 | # - asset: fonts/TrajanPro_Bold.ttf 64 | # weight: 700 65 | # 66 | # For details regarding fonts from package dependencies, 67 | # see https://flutter.io/custom-fonts/#from-packages 68 | -------------------------------------------------------------------------------- /79-markers/7642140318154827808.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/79-markers/7642140318154827808.png -------------------------------------------------------------------------------- /79-markers/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_map/flutter_map.dart'; 3 | import 'package:latlong/latlong.dart'; 4 | 5 | void main(){ 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class _State extends State{ 17 | @override 18 | Widget build(BuildContext context) { 19 | 20 | var markers = [ 21 | new Marker( 22 | width: 80.0, 23 | height: 80.0, 24 | point: new LatLng(41.8781, -87.6298), 25 | builder: (ctx) => new Icon(Icons.pin_drop, color: Colors.red,) 26 | ), 27 | new Marker( 28 | width: 80.0, 29 | height: 80.0, 30 | point: new LatLng(42.3314, -83.0458), 31 | builder: (ctx) => new Icon(Icons.pin_drop, color: Colors.red,) 32 | ), 33 | new Marker( 34 | width: 80.0, 35 | height: 80.0, 36 | point: new LatLng(42.7325, -84.5555), 37 | builder: (ctx) => new Icon(Icons.pin_drop, color: Colors.red,) 38 | ), 39 | ]; 40 | 41 | return new Scaffold( 42 | appBar: new AppBar( 43 | title: new Text('Name here'), 44 | ), 45 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 46 | body: new Container( 47 | padding: new EdgeInsets.all(32.0), 48 | child: new Center( 49 | child: new Column( 50 | children: [ 51 | new Flexible( 52 | child: new FlutterMap( 53 | options: new MapOptions( 54 | center: new LatLng(41.8781, -87.6298), 55 | zoom: 10.0 56 | ), 57 | //openmap uses layers so we have to provide it otherwise you get errors 58 | //the caching for open map is not same as google map but its good for open src projects 59 | layers: [ 60 | new TileLayerOptions( 61 | urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 62 | subdomains: ['a','b','c'], 63 | ), 64 | new MarkerLayerOptions(markers: markers) 65 | ], 66 | ), 67 | ) 68 | ], 69 | ), 70 | ), 71 | ), 72 | ); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /79-markers/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | flutter_map: ^0.1.3 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | # assets: 41 | # - images/smile.png 42 | 43 | # An image asset can refer to one or more resolution-specific "variants", see 44 | # https://flutter.io/assets-and-images/#resolution-aware. 45 | 46 | # For details regarding adding assets from package dependencies, see 47 | # https://flutter.io/assets-and-images/#from-packages 48 | 49 | # To add custom fonts to your application, add a fonts section here, 50 | # in this "flutter" section. Each entry in this list should have a 51 | # "family" key with the font family name, and a "fonts" key with a 52 | # list giving the asset and other descriptors for the font. For 53 | # example: 54 | # fonts: 55 | # - family: Schyler 56 | # fonts: 57 | # - asset: fonts/Schyler-Regular.ttf 58 | # - asset: fonts/Schyler-Italic.ttf 59 | # style: italic 60 | # - family: Trajan Pro 61 | # fonts: 62 | # - asset: fonts/TrajanPro.ttf 63 | # - asset: fonts/TrajanPro_Bold.ttf 64 | # weight: 700 65 | # 66 | # For details regarding fonts from package dependencies, 67 | # see https://flutter.io/custom-fonts/#from-packages 68 | -------------------------------------------------------------------------------- /80-map-interactions/9139680657493291099.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/80-map-interactions/9139680657493291099.png -------------------------------------------------------------------------------- /80-map-interactions/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_map/flutter_map.dart'; 3 | import 'package:latlong/latlong.dart'; 4 | 5 | void main(){ 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class _State extends State{ 17 | 18 | MapController mapController; 19 | Map coords; 20 | List markers; 21 | 22 | 23 | @override 24 | void initState() { 25 | mapController = new MapController(); 26 | 27 | coords = new Map(); 28 | coords.putIfAbsent("Chicago", () => new LatLng(41.8781, -87.6298)); 29 | coords.putIfAbsent("Detroit", () => new LatLng(42.3314, -83.0458)); 30 | coords.putIfAbsent("Lansing", () => new LatLng(42.7325, -84.5555)); 31 | 32 | markers = new List(); 33 | 34 | for(int i = 0; i < coords.length; i++) { 35 | markers.add( 36 | new Marker( 37 | width: 80.0, 38 | height: 80.0, 39 | point: coords.values.elementAt(i), 40 | builder: (ctx) => new Icon(Icons.pin_drop, color: Colors.red,), 41 | ) 42 | ); 43 | } 44 | } 45 | 46 | //method to move a map 47 | void _showCoord(int index) { 48 | mapController.move(coords.values.elementAt(index), 10.0); 49 | } 50 | 51 | List _makeButtons() { 52 | List list = new List(); 53 | 54 | for(int i = 0; i < coords.length; i++) { 55 | list.add(new RaisedButton(onPressed: () => _showCoord(i), child: new Text(coords.keys.elementAt(i)),)); 56 | } 57 | return list; 58 | } 59 | 60 | @override 61 | Widget build(BuildContext context) { 62 | return new Scaffold( 63 | appBar: new AppBar( 64 | title: new Text('Name here'), 65 | ), 66 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 67 | body: new Container( 68 | padding: new EdgeInsets.all(32.0), 69 | child: new Center( 70 | child: new Column( 71 | children: [ 72 | new Row(children: _makeButtons(),), 73 | new Flexible( 74 | child: new FlutterMap( 75 | mapController: mapController, 76 | options: new MapOptions( 77 | center: new LatLng(41.8781, -87.6298), 78 | zoom: 10.0 79 | ), 80 | //openmap uses layers so we have to provide it otherwise you get errors 81 | //the caching for open map is not same as google map but its good for open src projects 82 | layers: [ 83 | new TileLayerOptions( 84 | urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 85 | subdomains: ['a','b','c'], 86 | ), 87 | new MarkerLayerOptions(markers: markers), 88 | ], 89 | ), 90 | ) 91 | ], 92 | ), 93 | ), 94 | ), 95 | ); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /80-map-interactions/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | flutter_map: ^0.1.3 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | # assets: 41 | # - images/smile.png 42 | 43 | # An image asset can refer to one or more resolution-specific "variants", see 44 | # https://flutter.io/assets-and-images/#resolution-aware. 45 | 46 | # For details regarding adding assets from package dependencies, see 47 | # https://flutter.io/assets-and-images/#from-packages 48 | 49 | # To add custom fonts to your application, add a fonts section here, 50 | # in this "flutter" section. Each entry in this list should have a 51 | # "family" key with the font family name, and a "fonts" key with a 52 | # list giving the asset and other descriptors for the font. For 53 | # example: 54 | # fonts: 55 | # - family: Schyler 56 | # fonts: 57 | # - asset: fonts/Schyler-Regular.ttf 58 | # - asset: fonts/Schyler-Italic.ttf 59 | # style: italic 60 | # - family: Trajan Pro 61 | # fonts: 62 | # - asset: fonts/TrajanPro.ttf 63 | # - asset: fonts/TrajanPro_Bold.ttf 64 | # weight: 700 65 | # 66 | # For details regarding fonts from package dependencies, 67 | # see https://flutter.io/custom-fonts/#from-packages 68 | -------------------------------------------------------------------------------- /81-polylines/4970065838305236445.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raunakhajela/Flutter-Tutorials/50e42ba8ec67f541c1ec5fc3c0b166f8dc92e6b2/81-polylines/4970065838305236445.png -------------------------------------------------------------------------------- /81-polylines/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_map/flutter_map.dart'; 3 | import 'package:latlong/latlong.dart'; 4 | 5 | void main(){ 6 | runApp(new MaterialApp( 7 | home: new MyApp(), 8 | )); 9 | } 10 | 11 | class MyApp extends StatefulWidget { 12 | @override 13 | _State createState() => new _State(); 14 | } 15 | 16 | class _State extends State{ 17 | 18 | List points; 19 | MapController mapController; 20 | List markers; 21 | 22 | 23 | @override 24 | void initState() { 25 | super.initState(); 26 | 27 | mapController = new MapController(); 28 | points = new List(); 29 | points.add(new LatLng(41.8781, -87.6298)); 30 | points.add(new LatLng(42.3314, -83.0458)); 31 | points.add(new LatLng(42.7325, -84.5555)); 32 | 33 | markers = new List(); 34 | for(int i = 0; i < points.length; i++) { 35 | markers.add(new Marker( 36 | width: 80.0, 37 | height: 80.0, 38 | point: points.elementAt(i), 39 | builder: (ctx) => new Icon(Icons.pin_drop,color: Colors.red,), 40 | )); 41 | } 42 | 43 | } 44 | 45 | @override 46 | Widget build(BuildContext context) { 47 | return new Scaffold( 48 | appBar: new AppBar( 49 | title: new Text('Name here'), 50 | ), 51 | //hit Ctrl+space in intellij to know what are the options you can use in flutter widgets 52 | body: new Container( 53 | padding: new EdgeInsets.all(32.0), 54 | child: new Center( 55 | child: new Column( 56 | children: [ 57 | new Flexible( 58 | child: new FlutterMap( 59 | mapController: mapController, 60 | options: new MapOptions( 61 | center: new LatLng(41.8781, -87.6298), 62 | zoom: 10.0 63 | ), 64 | //openmap uses layers so we have to provide it otherwise you get errors 65 | //the caching for open map is not same as google map but its good for open src projects 66 | layers: [ 67 | new TileLayerOptions( 68 | urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 69 | subdomains: ['a','b','c'], 70 | ), 71 | new MarkerLayerOptions(markers: markers), 72 | new PolylineLayerOptions( 73 | polylines: [ 74 | new Polyline( 75 | points: points, 76 | strokeWidth: 4.0, 77 | color: Colors.purple 78 | ) 79 | ] 80 | ) 81 | ], 82 | ), 83 | ) 84 | ], 85 | ), 86 | ), 87 | ), 88 | ); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /81-polylines/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: tutorial2 2 | description: A new Flutter project. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # Read more about versioning at semver.org. 10 | version: 1.0.0+1 11 | 12 | environment: 13 | sdk: ">=2.0.0-dev.68.0 <3.0.0" 14 | 15 | dependencies: 16 | flutter: 17 | sdk: flutter 18 | 19 | 20 | # The following adds the Cupertino Icons font to your application. 21 | # Use with the CupertinoIcons class for iOS style icons. 22 | cupertino_icons: ^0.1.2 23 | flutter_map: ^0.1.3 24 | 25 | dev_dependencies: 26 | flutter_test: 27 | sdk: flutter 28 | 29 | 30 | # For information on the generic Dart part of this file, see the 31 | # following page: https://www.dartlang.org/tools/pub/pubspec 32 | 33 | # The following section is specific to Flutter. 34 | flutter: 35 | 36 | # The following line ensures that the Material Icons font is 37 | # included with your application, so that you can use the icons in 38 | # the material Icons class. 39 | uses-material-design: true 40 | # assets: 41 | # - images/smile.png 42 | 43 | # An image asset can refer to one or more resolution-specific "variants", see 44 | # https://flutter.io/assets-and-images/#resolution-aware. 45 | 46 | # For details regarding adding assets from package dependencies, see 47 | # https://flutter.io/assets-and-images/#from-packages 48 | 49 | # To add custom fonts to your application, add a fonts section here, 50 | # in this "flutter" section. Each entry in this list should have a 51 | # "family" key with the font family name, and a "fonts" key with a 52 | # list giving the asset and other descriptors for the font. For 53 | # example: 54 | # fonts: 55 | # - family: Schyler 56 | # fonts: 57 | # - asset: fonts/Schyler-Regular.ttf 58 | # - asset: fonts/Schyler-Italic.ttf 59 | # style: italic 60 | # - family: Trajan Pro 61 | # fonts: 62 | # - asset: fonts/TrajanPro.ttf 63 | # - asset: fonts/TrajanPro_Bold.ttf 64 | # weight: 700 65 | # 66 | # For details regarding fonts from package dependencies, 67 | # see https://flutter.io/custom-fonts/#from-packages 68 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for your interest in contributing to Flutter Tutorials! We want to make contributing to this project as easy and transparent as 4 | possible. Please take a moment to review this document **before submitting a pull request**. 5 | 6 | In the repo you can contribute by: 7 | - Adding tutorials for the existing Flutter code snippets 8 | - Translating the tutorials 9 | - Adding new Flutter code snippets for the new and upcoming Flutter widgets 10 | - Improve CONTRIBUTING.md, and README.md 11 | 12 | ## Pull Requests 13 | We actively welcome your pull requests. 14 | 15 | 1. Fork the repo and create your branch from `master`. 16 | 2. Name the branch like `tutorial/[widget-name]` and add new tutorial and code snippet 17 | 3. Create `readme.md` inside your `tutorial/[widget-name]` with your code-snippet tutorial. You can write whole explanation for the same. 18 | 4. Submit your PR for review 19 | 20 | It's never a fun experience to have your pull request declined after investing a lot of time and effort. To avoid this from happening, we request that contributors to first check if there is any tutorial that already exists similar to the one you are going to publish. If the existing tutorial, and code-snippet can be improved then you can create PR by updating it. Furthermore, you can create [an issue](https://github.com/raunakhajela/Flutter-Tutorials/issues) to discuss the same. 21 | 22 | ## License 23 | By contributing to tutorials, you agree that your contributions will be licensed 24 | under the LICENSE file in the root directory of this source tree. 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Raunak Hajela 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Flutter Tutorials** 2 | ## What is Flutter? 3 | Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. [Source]
4 | 5 | ##### **If you want to Learn Dart before learning Flutter, [Click Here](https://github.com/raunakhajela/Dart-Tutorials).** 6 | 7 | --- 8 | 9 | ## Contributors 10 | * #### [Raunak Hajela](https://twitter.com/raunakhajela) 11 | > UX Designer • Strategist • Project Manager • Harry Potter Fan. :crystal_ball:
12 | ```I invest in people and great ideas. What about you?``` 13 | 14 | * #### [Harsh Trivedi](https://harsh98trivedi.github.io) 15 | > A passionate Tech Lover and a Graphic Freak. :computer:
16 | ```Inspired by Imagination``` 17 | 18 | * #### [Vivek Kumar Kanaujia](https://twitter.com/vivdroid) 19 | > Android • IoT • Arduino • Raspberry Pi • Flutter • Dart • Yii2 :dart:
20 | ```Sky is limit``` 21 | 22 | --- 23 | 24 | ## Special Thanks 25 | * ### [Bryan Cairns](https://www.facebook.com/voidrealms) 26 | > Be sure to join his [Facebook Group](https://www.facebook.com/groups/1400884323467285/) :pushpin: 27 | 28 | * ### [Bram Vanbilsen](https://twitter.com/BramVanbilsen) 29 | > Watch his awesome videos on his [YouTube Channel](https://www.youtube.com/user/BramVanbilsen) :pushpin: 30 | 31 | * ### [Brandon Donnelson](https://twitter.com/branflake2267) 32 | > Watch his awesome videos on his [YouTube Channel](https://www.youtube.com/user/branflake2267) :pushpin: 33 | 34 | ## License 35 | Flutter Tutorials is licensed under [MIT License](https://github.com/raunakhajela/Flutter-Tutorials/blob/master/LICENSE) 36 | --------------------------------------------------------------------------------