Coding

Coding Flutter Flutter Layout Sample
Flutter:: Column
November 20, 2019
0
, , ,
MainAxisAlignment CrossAxisAlignment Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.all(0.0), color: Colors.cyanAccent, width: 80.0, height: 80.0, ), Container( padding: const EdgeInsets.all(0.0), color: Colors.blueAccent, width: 80.0, height: 80.0, ), Container( padding: const EdgeInsets.all(0.0), color: Colors.orangeAccent, width: 80.0, height: 80.0, ), ], Reference:http://flutterexamples.com/
Flutter Flutter Layout Sample
Flutter: Row
November 20, 2019
0
, ,
MainAxisAlignment CrossAxisAlignment Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.all(0.0), color: Colors.cyanAccent, width: 80.0, height: 80.0, ), Container( padding: const EdgeInsets.all(0.0), color: Colors.blueAccent, width: 80.0, height: 80.0, ), Container( padding: const EdgeInsets.all(0.0), color: Colors.orangeAccent, width: 80.0, height: 80.0, ), ], ),
Coding Data Passing Flutter
Flutter: Data Passing – First Screen To Second Screen and vice-versa
November 20, 2019
0
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Flutter', home: FirstScreen(), )); } class FirstScreen extends StatefulWidget { @override _FirstScreenState createState() { return _FirstScreenState(); } } class _FirstScreenState extends State { // this allows us to access the TextField text TextEditingController textFieldController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('First Screen')), body: […]
Coding Flutter Navigation / Route
Flutter:: Navigate with named routes
November 20, 2019
0
,
Why Use It Compare to Normal Route using this route has additional advantage, if you need to navigate to the same screen in many parts of your app, this approach can result in code duplication. The solution is to define a named route, and use the named route for navigation. import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( […]
Flutter Navigation / Route
Flutter:: Navigate to a new screen and back
November 20, 2019
0
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Navigation Basics', home: FirstRoute(), )); } class FirstRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Route'), ), body: Center( child: RaisedButton( child: Text('>> Second Route'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), ); }, ), ), ); } } […]
Coding Flutter Flutter Layout Sample
Flutter:: Layout Sample (Row + Column)
November 19, 2019
0
, , ,
lib/main.dart import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; void main() { debugPaintSizeEnabled = true; // Remove to suppress visual layout runApp(RowColumnApp()); } class RowColumnApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter layout demo', home: Scaffold( appBar: AppBar( title: Text('Flutter layout demo'), ), // Change to buildColumn() for the other column example […]
Coding Flutter
Flutter:: Resource / CookBook
November 19, 2019
0
,
https://flutter.dev/docs/development/ui/layout https://flutter.dev/docs/cookbook https://github.com/Solido/awesome-flutter https://github.com/iampawan/FlutterExampleApps https://github.com/flutter/samples/blob/master/INDEX.md Flutter: Create Beautiful Material Splash Screen | Dart 2
Coding Flutter
Flutter: Youtube like App Bar
November 19, 2019
0
,
pubspec.yaml flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/images/youtube_icon.png - assets/images/youtube_action1.png - assets/images/youtube_action2.png - assets/images/youtube_action3.png - assets/images/profile_pic.png lib/main.dart import 'package:flutter/material.dart'; void main() { runApp(YoutubeAppbar()); } class YoutubeAppbar extends […]
Coding Flutter
Flutter: Facebook Like App Bar
November 19, 2019
0
,
pubspec.yaml flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - assets/images/facebook_icon.png - assets/images/facebook_msg.png - assets/images/facebook_search.png lib/main.dart import 'package:flutter/material.dart'; void main() { runApp(FacebookAppbar()); } class FacebookAppbar extends StatelessWidget { @override Widget […]
Coding Flutter
Flutter: Basic App Bar
November 19, 2019
0
,
lib/main.dart import 'package:flutter/material.dart'; void main() { runApp(BasicAppbar()); } class BasicAppbar extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( // backgroundColor: Colors.white, leading: Padding( padding: EdgeInsets.only(left: 12), child: IconButton( icon: Icon(Icons.list), onPressed: () { print('Click leading'); }, ), ), title: Row( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Basic AppBar'), ] ), actions: [ […]