diff --git a/handling_routes/README.md b/handling_routes/README.md index a1daf84..596d06d 100644 --- a/handling_routes/README.md +++ b/handling_routes/README.md @@ -1,8 +1,12 @@ -# handling_routes +# Handling Routes + +Mobile apps typically reveal their contents via full-screen elements called "screens" or "pages". In Flutter these elements are called routes and they're managed by a Navigator widget. The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop. + +Read [[Documentation](https://docs.flutter.io/flutter/widgets/Navigator-class.html)] + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/handling_routes/demo_img.gif b/handling_routes/demo_img.gif new file mode 100644 index 0000000..018a2e9 Binary files /dev/null and b/handling_routes/demo_img.gif differ diff --git a/handling_routes/lib/AboutPage.dart b/handling_routes/lib/AboutPage.dart index b47bee0..def6c9b 100644 --- a/handling_routes/lib/AboutPage.dart +++ b/handling_routes/lib/AboutPage.dart @@ -4,28 +4,42 @@ class AboutPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( + // AppBar appBar: new AppBar( + // Title title: new Text("About Page"), + // App Bar background color backgroundColor: Colors.blue, ), + // Body body: new Container( + // Center the content child: new Center( child: new Column( + // Center content in the column mainAxisAlignment: MainAxisAlignment.center, + // add children to the column children: [ + // Text new Text( "About Page\nClick on below icon to goto Home Page", + // Setting the style for the Text style: new TextStyle(fontSize: 20.0), + // Set text alignment to center + textAlign: TextAlign.center, ), + // Icon Button new IconButton( icon: new Icon( Icons.home, - color: Colors.blue, + color: Colors.red, ), + // Execute when pressed onPressed: () { // use the navigator to goto a named route Navigator.of(context).pushNamed('/'); }, + // Setting the size of icon iconSize: 80.0, ) ], diff --git a/handling_routes/lib/HomePage.dart b/handling_routes/lib/HomePage.dart index 6934455..88e3475 100644 --- a/handling_routes/lib/HomePage.dart +++ b/handling_routes/lib/HomePage.dart @@ -4,28 +4,42 @@ class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( + // AppBar appBar: new AppBar( + // Title title: new Text("Home Page"), + // App Bar background color backgroundColor: Colors.red, ), + // Body body: new Container( + // Center the content child: new Center( child: new Column( + // Center content in the column mainAxisAlignment: MainAxisAlignment.center, + // add children to the column children: [ + // Text new Text( "Home Page\nClick on below icon to goto About Page", - style: new TextStyle(fontSize: 20.0), + // Setting the style for the Text + style: new TextStyle(fontSize: 20.0,), + // Set text alignment to center + textAlign: TextAlign.center, ), + // Icon Button new IconButton( icon: new Icon( Icons.info, - color: Colors.green, + color: Colors.blue, ), + // Execute when pressed onPressed: () { // use the navigator to goto a named route Navigator.of(context).pushNamed('/about'); }, + // Setting the size of icon iconSize: 80.0, ) ], diff --git a/load_local_image/README.md b/load_local_image/README.md index a5481b3..cbeb6bf 100644 --- a/load_local_image/README.md +++ b/load_local_image/README.md @@ -1,8 +1,10 @@ -# load_local_image +# Load Local Image + +Example app showing implementation which loads up an image from a local folder. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/load_local_image/demo_img.jpg b/load_local_image/demo_img.jpg new file mode 100755 index 0000000..d72fb34 Binary files /dev/null and b/load_local_image/demo_img.jpg differ diff --git a/load_local_image/lib/main.dart b/load_local_image/lib/main.dart index d462ae7..b267970 100644 --- a/load_local_image/lib/main.dart +++ b/load_local_image/lib/main.dart @@ -15,7 +15,10 @@ class MyApp extends StatelessWidget { ), body: new Container( child: new Center( - child: new Text("Hellow World!"), + child: new Text( + "Hello World!", + style: new TextStyle(color: Colors.white), + ), ), // Set the image as the background of the Container decoration: new BoxDecoration( diff --git a/load_local_json/README.md b/load_local_json/README.md index 054f7ec..7016258 100644 --- a/load_local_json/README.md +++ b/load_local_json/README.md @@ -1,8 +1,10 @@ -# load_local_json +# Load Local JSON + +Example app showing implementation which loads up a json file from a local folder. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/load_local_json/demo_img.gif b/load_local_json/demo_img.gif new file mode 100644 index 0000000..12456a1 Binary files /dev/null and b/load_local_json/demo_img.gif differ diff --git a/load_local_json/lib/main.dart b/load_local_json/lib/main.dart index fa2c246..838c5c6 100644 --- a/load_local_json/lib/main.dart +++ b/load_local_json/lib/main.dart @@ -30,9 +30,11 @@ class MyAppState extends State { .of(context) .loadString('data_repo/starwars_data.json'), builder: (context, snapshot) { + // Decode the JSON var new_data = JSON.decode(snapshot.data.toString()); return new ListView.builder( + // Build the ListView itemBuilder: (BuildContext context, int index) { return new Card( child: new Column( diff --git a/simple_material_app/README.md b/simple_material_app/README.md index 56dbe2d..d6b862b 100644 --- a/simple_material_app/README.md +++ b/simple_material_app/README.md @@ -1,8 +1,10 @@ -# simple_material_app +# Simple Material App + +A simple material app + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/simple_material_app/demo_img.jpg b/simple_material_app/demo_img.jpg new file mode 100755 index 0000000..5768621 Binary files /dev/null and b/simple_material_app/demo_img.jpg differ diff --git a/simple_material_app/lib/main.dart b/simple_material_app/lib/main.dart index 4d231cd..139e825 100644 --- a/simple_material_app/lib/main.dart +++ b/simple_material_app/lib/main.dart @@ -13,7 +13,9 @@ void main() { ), // Body body: new Container( + // Center the content child: new Center( + // Add Text child: new Text("Hello World!"), ), ), diff --git a/stateful_widget/README.md b/stateful_widget/README.md index 05e86a6..c63455e 100644 --- a/stateful_widget/README.md +++ b/stateful_widget/README.md @@ -1,8 +1,14 @@ -# stateful_widget +# Stateful Widget + +A widget that has mutable state. + +A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete + +Read [[Documentation](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)] + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/stateful_widget/demo_img.gif b/stateful_widget/demo_img.gif new file mode 100644 index 0000000..531571f Binary files /dev/null and b/stateful_widget/demo_img.gif differ diff --git a/stateless_widgets/README.md b/stateless_widgets/README.md index 07acbfe..85f3d9f 100644 --- a/stateless_widgets/README.md +++ b/stateless_widgets/README.md @@ -1,8 +1,14 @@ -# stateless_widgets +# Stateless Widget + +A widget that does not require mutable state. + +A stateless widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete + +Read [[Documentation](https://docs.flutter.io/flutter/widgets/StatelessWidget-class.html)] + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/stateless_widgets/demo_img.jpg b/stateless_widgets/demo_img.jpg new file mode 100755 index 0000000..284e665 Binary files /dev/null and b/stateless_widgets/demo_img.jpg differ diff --git a/tip_calculator/README.md b/tip_calculator/README.md index 7d9cd32..dbf0478 100644 --- a/tip_calculator/README.md +++ b/tip_calculator/README.md @@ -1,8 +1,10 @@ -# tip_calculator +# Tip Calculator + +Example app showing implementation which calculates the tip. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/tip_calculator/demo_img.gif b/tip_calculator/demo_img.gif new file mode 100644 index 0000000..6c5d455 Binary files /dev/null and b/tip_calculator/demo_img.gif differ diff --git a/using_alert_dialog/README.md b/using_alert_dialog/README.md index 09cdf20..117ba63 100644 --- a/using_alert_dialog/README.md +++ b/using_alert_dialog/README.md @@ -1,8 +1,14 @@ -# using_alert_dialog +# Using Alert Dialog + +A material design alert dialog. + +An alert dialog informs the user about situations that require acknowledgement. An alert dialog has an optional title and an optional list of actions. The title is displayed above the content and the actions are displayed below the content. + +Read [[Documentation](https://docs.flutter.io/flutter/material/AlertDialog-class.html)] + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/using_alert_dialog/demo_img.gif b/using_alert_dialog/demo_img.gif new file mode 100644 index 0000000..1ab5344 Binary files /dev/null and b/using_alert_dialog/demo_img.gif differ diff --git a/using_edittext/README.md b/using_edittext/README.md index 9700072..8592c13 100644 --- a/using_edittext/README.md +++ b/using_edittext/README.md @@ -1,8 +1,10 @@ -# using_edittext +# Using Edit Text + +Example app that shows how to use a Edit Text in an app. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/using_edittext/demo_img.gif b/using_edittext/demo_img.gif new file mode 100644 index 0000000..b9db6e0 Binary files /dev/null and b/using_edittext/demo_img.gif differ diff --git a/using_http_get/README.md b/using_http_get/README.md index 62b1d97..9fbd503 100644 --- a/using_http_get/README.md +++ b/using_http_get/README.md @@ -1,8 +1,10 @@ -# using_http_get +# Using Http GET + +Example app showing implementation which loads up an information via making an HTTP GET call to a server and then displays the results in a list form. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/using_http_get/demo_img.gif b/using_http_get/demo_img.gif new file mode 100644 index 0000000..728cd4a Binary files /dev/null and b/using_http_get/demo_img.gif differ diff --git a/using_theme/README.md b/using_theme/README.md index a39a64b..6864105 100644 --- a/using_theme/README.md +++ b/using_theme/README.md @@ -1,8 +1,10 @@ -# using_theme +# Using Themes + +Example app that shows how to setup a theme in your app. + + -A new Flutter project. ## Getting Started -For help getting started with Flutter, view our online -[documentation](http://flutter.io/). +For help getting started with Flutter, view online [documentation](http://flutter.io/). \ No newline at end of file diff --git a/using_theme/demo_img.jpg b/using_theme/demo_img.jpg new file mode 100755 index 0000000..21fa3b4 Binary files /dev/null and b/using_theme/demo_img.jpg differ diff --git a/using_theme/lib/main.dart b/using_theme/lib/main.dart index 9e5d090..23e6840 100644 --- a/using_theme/lib/main.dart +++ b/using_theme/lib/main.dart @@ -3,15 +3,27 @@ import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( home: new Scaffold( + // AppBar appBar: new AppBar( + // AppBar Title title: new Text("Using Theme"), ), body: new Container( child: new Center( - child: new Text("Hello World!", style: new TextStyle(color: Colors.white),), + child: new Text( + "Hello World!", + // Set the text style, text color to white + style: new TextStyle(color: Colors.white), + ), ), - decoration: new BoxDecoration(color: Colors.purple)), + // Another way to set the background color + decoration: new BoxDecoration(color: Colors.lightBlueAccent)), + ), + // Set the theme's primary color, accent color, + theme: new ThemeData( + primarySwatch: Colors.blue, + accentColor: Colors.lightBlueAccent, + backgroundColor: Colors.blueAccent, ), - theme: new ThemeData(primarySwatch: Colors.deepPurple), )); }