Install Flutter Without AS

1. Download SDK Flutter

Mac

2. Download Command Line Tools Only

3. Download OpenJDK Terbaru

4. Download Vscode

5. Buat Folder 

C:/android

6. Extraks Flutter SDK  & SDK Tools, di Folder

C:/android/flutter

C:/android/tools

7. Install openJDK & Vscode di Folder

C:/android/openJDK

C:/android/Microsoft VS Code

8. Buka CMD Ketikan perintah dibawah untuk mengeset      Environtment Variabel dan path

setx JAVA_HOME “C:\Android\openjdk”
setx ANDROID_HOME “C:\Android”
setx ANDROID_SDK_ROOT “C:\Android\tools”
setx path “%path%;”C:\Android\sdk;C:\Android\tools\bin;C:\Android\flutter\bin”

9. Buka CMD masuk ke Folder

sdkmanager “system-images;android-28;default;x86_64”
sdkmanager “platform-tools”
sdkmanager “build-tools;28.0.3”
sdkmanager “platforms;android-28”
sdkmanager —-update

Ketikan Perintah

C:/android/tools/bin

10. Cek Flutter dan Android Lisences dengan Perintah

flutter doctor --android-licenses

11. Buka VsCode, Install Extension

1. Dart 

2. Flutter

3. Awesome Flutter Snippet

LAYOUT WIDGET

main.dart

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "Layout Widget";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                Text(_title),
   

              ],
            ),
          ),
        ),
      ),
    );
  }
}

BUTTON WIDGET

FlatButton

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  padding: EdgeInsets.all(8.0),
  splashColor: Colors.blueAccent,
  onPressed: () {},
  child: Text(
    "Flat Button",
    style: TextStyle(fontSize: 20.0),
  ),
),

FlatButton + Icon

FlatButton.icon(
  color: Colors.green,
  icon: Icon(Icons.add_a_photo), //`Icon` to display
  label: Text('Flat Button With Icon'), //`Text` to display
  onPressed: () {},
),

Custom Flat Button

import 'package:flutter/material.dart';

class CustomFlatButton extends StatelessWidget {
  final String title;
  final Color textColor;
  final double fontSize;
  final FontWeight fontWeight;
  final VoidCallback onPressed;
  final Color color;
  final Color splashColor;
  final Color borderColor;
  final double borderWidth;

  CustomFlatButton(
      {this.title,
        this.textColor,
        this.fontSize,
        this.fontWeight,
        this.onPressed,
        this.color,
        this.splashColor,
        this.borderColor,
        this.borderWidth});

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: onPressed,
      color: color,
      splashColor: splashColor,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12.0),
        child: Text(
          title,
          softWrap: true,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: textColor,
            decoration: TextDecoration.none,
            fontSize: fontSize,
            fontWeight: fontWeight,
          ),
        ),
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
        side: BorderSide(
          color: borderColor,
          width: borderWidth,
        ),
      ),
    );
  }
}




CustomFlatButton(
  title: "Custom Flat Button",
  textColor: Colors.white,
  color: Colors.red,
  fontSize: 15.0,
  fontWeight: FontWeight.bold,
  borderWidth: 1,
  borderColor: Colors.grey,
  onPressed: () { _changeTitle("Custom Flat Button",Colors.black.withOpacity(0.5)); },
),

RaisedButton

RaisedButton(
  onPressed: () { _changeTitle("Raised Button",Colors.red.withOpacity(0.5)); },
  textColor: Colors.white,
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: <Color>[
          Color(0xFF0D47A1),
          Color(0xFF1976D2),
          Color(0xFF42A5F5),
        ],
      ),
    ),
    padding: const EdgeInsets.all(10.0),
    child: const Text('Raised Button',
        style: TextStyle(fontSize: 20)),
  ),
),

MaterialButton

Material(
      elevation: 5.0,
      borderRadius: BorderRadius.circular(30.0),
      color: Colors.blue.withOpacity(0.7),
      child: MaterialButton(
        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
        onPressed: () { _changeTitle("Material Button",Colors.green.withOpacity(0.5)); },
        child: Text("Material Button",
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
        ),
      ),
),

InkWell

Material(
color: Colors.transparent,
child: InkWell(
  borderRadius: BorderRadius.circular(30),
  onTap: () { _changeTitle("InkWell",Colors.orange.withOpacity(0.5)); },
  splashColor: Colors.blue,
  highlightColor: Colors.blue,
  child: Container(
    height: 36,
    width: 240,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      border: Border.all(color: Colors.grey),
    ),
    child: Center(
      child: Text("InkWell"),
    ),
  ),
),
),

InkWell + Icon

SizedBox.fromSize(
  size: Size(56, 56), // button width and height
  child: ClipOval(
    child: Material(
      color: Colors.orange, // button color
      child: InkWell(
        splashColor: Colors.green, // splash color
        onTap: () { _changeTitle("InkWell With Icon",Colors.red.withOpacity(0.5)); },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.call), // icon
            Text("Call"), // text
          ],
        ),
      ),
    ),
  ),
),

SignInButton

SignInButton(
  Buttons.Google,
  text: "Login dengan Google",
  onPressed: () { _changeTitle("Signin Button Google",Colors.green.withOpacity(0.5)); },
),

SignInButtonBuilder(
  text: 'Login dengan Email',
  icon: Icons.email,
  onPressed: () { _changeTitle("Signin Button Email",Colors.red.withOpacity(0.5)); },
  backgroundColor: Colors.blueGrey[700],
),

SignInButtonBuilder(
  text: 'Login dengan Email',
  icon: Icons.email,
  onPressed: () { _changeTitle("Signin Button Mini",Colors.black.withOpacity(0.5)); },
  backgroundColor: Colors.blueGrey[700],
  mini: true,
),
flutter_signin_button: ^1.0.0

NiceButton

NiceButton(
  radius: 40,
  padding: const EdgeInsets.all(15),
  text: "Register",
  icon: Icons.account_box,
  background: Colors.blue,
  gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
  onPressed: () { _changeTitle("Nice Button",Colors.red.withOpacity(0.5)); },
),

Full Code

import 'package:flutter/material.dart';
import 'custom_flat_button.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:nice_button/NiceButton.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.red),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String _title = "Button Widget";
  Color _bgColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _layout(context),
    );
  }

  void _changeTitle(String title, Color bgColor){
    setState(() {
      _title = title;
      _bgColor = bgColor;
    });
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        color: _bgColor,
              child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                
                FlatButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.black,
                  padding: EdgeInsets.all(8.0),
                  splashColor: Colors.blueAccent,
                  onPressed: () { _changeTitle("Flat Button",Colors.yellow.withOpacity(0.5)); },
                  child: Text(
                    "Flat Button",
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),

                SizedBox(height: 30),

                FlatButton.icon(
                  color: Colors.green,
                  icon: Icon(Icons.add_a_photo), //`Icon` to display
                  label: Text('Flat Button With Icon'), //`Text` to display
                  onPressed: () { _changeTitle("Flat Button With Icon",Colors.red.withOpacity(0.5)); },
                ),

                SizedBox(height: 30),

                CustomFlatButton(
                  title: "Custom Flat Button",
                  textColor: Colors.white,
                  color: Colors.red,
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                  borderWidth: 1,
                  borderColor: Colors.grey,
                  onPressed: () { _changeTitle("Custom Flat Button",Colors.black.withOpacity(0.5)); },
                ),

                SizedBox(height: 30),

                RaisedButton(
                  onPressed: () { _changeTitle("Raised Button",Colors.red.withOpacity(0.5)); },
                  textColor: Colors.white,
                  padding: const EdgeInsets.all(0.0),
                  child: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Color(0xFF0D47A1),
                          Color(0xFF1976D2),
                          Color(0xFF42A5F5),
                        ],
                      ),
                    ),
                    padding: const EdgeInsets.all(10.0),
                    child: const Text('Raised Button',
                        style: TextStyle(fontSize: 20)),
                  ),
                ),

                SizedBox(height: 30),

                Material(
                      elevation: 5.0,
                      borderRadius: BorderRadius.circular(30.0),
                      color: Colors.blue.withOpacity(0.7),
                      child: MaterialButton(
                        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                        onPressed: () { _changeTitle("Material Button",Colors.green.withOpacity(0.5)); },
                        child: Text("Material Button",
                            textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),
                        ),
                      ),
                ),

               SizedBox(height: 30),

               Material(
                color: Colors.transparent,
                child: InkWell(
                  borderRadius: BorderRadius.circular(30),
                  onTap: () { _changeTitle("InkWell",Colors.orange.withOpacity(0.5)); },
                  splashColor: Colors.blue,
                  highlightColor: Colors.blue,
                  child: Container(
                    height: 36,
                    width: 240,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.grey),
                    ),
                    child: Center(
                      child: Text("InkWell"),
                    ),
                  ),
                ),
              ),

              SizedBox(height: 30),

              SizedBox.fromSize(
                size: Size(56, 56), // button width and height
                child: ClipOval(
                  child: Material(
                    color: Colors.orange, // button color
                    child: InkWell(
                      splashColor: Colors.green, // splash color
                      onTap: () { _changeTitle("InkWell With Icon",Colors.red.withOpacity(0.5)); },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(Icons.call), // icon
                          Text("Call"), // text
                        ],
                      ),
                    ),
                  ),
                ),
              ),

              SizedBox(height: 30),


              SignInButton(
                Buttons.Google,
                text: "Login dengan Google",
                onPressed: () { _changeTitle("Signin Button Google",Colors.green.withOpacity(0.5)); },
              ),

              SignInButtonBuilder(
                text: 'Login dengan Email',
                icon: Icons.email,
                onPressed: () { _changeTitle("Signin Button Email",Colors.red.withOpacity(0.5)); },
                backgroundColor: Colors.blueGrey[700],
              ),

              SignInButtonBuilder(
                text: 'Login dengan Email',
                icon: Icons.email,
                onPressed: () { _changeTitle("Signin Button Mini",Colors.black.withOpacity(0.5)); },
                backgroundColor: Colors.blueGrey[700],
                mini: true,
              ),


              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Register",
                icon: Icons.account_box,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _changeTitle("Nice Button",Colors.red.withOpacity(0.5)); },
              ),

              SizedBox(height: 30),




                



              ],
            ),
          ),
        ),
      ),
    );
  }
}

NOTIFICATION WIDGET

ModalBottomSheet

  void _showBottom() {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return new Container(
          padding: new EdgeInsets.all(5.0),
          child: new Row(
            mainAxisAlignment:  MainAxisAlignment.center,
            children: <Widget>[
              new Text('Ini Modal Bottom Sheet', style: new TextStyle(color: Colors.white),),
              SizedBox(width: 50),
              new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),)
            ],
          ),
        );  
      }
    );
  }

SnackBar

final GlobalKey<ScaffoldState> _scaffoldstate = new GlobalKey<ScaffoldState>();
  void _showSnackbar() {
    _scaffoldstate.currentState.showSnackBar(
        SnackBar(
          content: Text('Ini Snack Bar',style: TextStyle(color: Colors.white),),
          backgroundColor: Colors.blue,
          action: SnackBarAction(
            label: 'x',
            onPressed: () {},
          ),
        )     
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldstate,
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _layout(context),
    );
  }

Dialog

  Future _showAlert(BuildContext context, String message) async {
    return showDialog(
        context: context,
        child: new AlertDialog(
          title: new Text(message),
          actions: <Widget>[
            new FlatButton(onPressed: () => Navigator.pop(context), child: new Text('Ok'))
          ],
        )
        
    );
  }

Simple Dialog

  void _setValue(String value) => setState(() => _title = value);

  Future _askUser() async {
    switch(
    await showDialog(
        context: context,
        child: new SimpleDialog(
          title: new Text('Do you like Flutter?'),
          children: <Widget>[
            new SimpleDialogOption(child: new Text('Yes!!!'),onPressed: (){Navigator.pop(context, Answers.YES);},),
            new SimpleDialogOption(child: new Text('NO :('),onPressed: (){Navigator.pop(context, Answers.NO);},),
            new SimpleDialogOption(child: new Text('Maybe :|'),onPressed: (){Navigator.pop(context, Answers.MAYBE);},),
          ],
        )
    )
    ) {
      case Answers.YES:
        _setValue('Yes');
        break;
      case Answers.NO:
        _setValue('No');
        break;
      case Answers.MAYBE:
        _setValue('Maybe');
        break;
    }
  }

SweetAlert

  void _showSweetALert(BuildContext context,String title, String subtitle, SweetAlertStyle style){
      return SweetAlert.show(context, title: title, subtitle: subtitle, style: style);
  }

  void _showSweetALert2(){
      SweetAlert.show(context,
                subtitle: "Do you want to delete this message",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {
              if(isConfirm){
                SweetAlert.show(context,subtitle: "Deleting...", style: SweetAlertStyle.loading);
                new Future.delayed(new Duration(seconds: 2),(){
                  SweetAlert.show(context,subtitle: "Success!", style: SweetAlertStyle.success);
                });
              }else{
                SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
              }
              // return false to keep dialog
              return false;
            });
  }
sweetalert: ^0.0.1

Full Code

import 'package:flutter/material.dart';
import 'package:nice_button/nice_button.dart';
import 'dart:async';
import 'package:sweetalert/sweetalert.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.dark, primaryColor: Colors.blueAccent),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

enum Answers{YES,NO,MAYBE}

class _MyAppState extends State<MyApp> {

  String _title = "Notification Widget";
  Color _bgColor = Colors.white;

  final GlobalKey<ScaffoldState> _scaffoldstate = new GlobalKey<ScaffoldState>();

  void _showBottom() {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return new Container(
          padding: new EdgeInsets.all(5.0),
          child: new Row(
            mainAxisAlignment:  MainAxisAlignment.center,
            children: <Widget>[
              new Text('Ini Modal Bottom Sheet', style: new TextStyle(color: Colors.white),),
              SizedBox(width: 50),
              new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),)
            ],
          ),
        );  
      }
    );
  }

  void _showSnackbar() {
    _scaffoldstate.currentState.showSnackBar(
        SnackBar(
          content: Text('Ini Snack Bar',style: TextStyle(color: Colors.white),),
          backgroundColor: Colors.blue,
          action: SnackBarAction(
            label: 'x',
            onPressed: () {},
          ),
        )     
    );
  }

  Future _showAlert(BuildContext context, String message) async {
    return showDialog(
        context: context,
        child: new AlertDialog(
          title: new Text(message),
          actions: <Widget>[
            new FlatButton(onPressed: () => Navigator.pop(context), child: new Text('Ok'))
          ],
        )
        
    );
  }


  void _setValue(String value) => setState(() => _title = value);

  Future _askUser() async {
    switch(
    await showDialog(
        context: context,
        child: new SimpleDialog(
          title: new Text('Do you like Flutter?'),
          children: <Widget>[
            new SimpleDialogOption(child: new Text('Yes!!!'),onPressed: (){Navigator.pop(context, Answers.YES);},),
            new SimpleDialogOption(child: new Text('NO :('),onPressed: (){Navigator.pop(context, Answers.NO);},),
            new SimpleDialogOption(child: new Text('Maybe :|'),onPressed: (){Navigator.pop(context, Answers.MAYBE);},),
          ],
        )
    )
    ) {
      case Answers.YES:
        _setValue('Yes');
        break;
      case Answers.NO:
        _setValue('No');
        break;
      case Answers.MAYBE:
        _setValue('Maybe');
        break;
    }
  }

  void _showSweetALert(BuildContext context,String title, String subtitle, SweetAlertStyle style){
      return SweetAlert.show(context, title: title, subtitle: subtitle, style: style);
  }

  void _showSweetALert2(){
      SweetAlert.show(context,
                subtitle: "Do you want to delete this message",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {
              if(isConfirm){
                SweetAlert.show(context,subtitle: "Deleting...", style: SweetAlertStyle.loading);
                new Future.delayed(new Duration(seconds: 2),(){
                  SweetAlert.show(context,subtitle: "Success!", style: SweetAlertStyle.success);
                });
              }else{
                SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
              }
              // return false to keep dialog
              return false;
            });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldstate,
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _layout(context),
    );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        color: _bgColor,
              child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                
              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "ModalBottomSheet",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _showBottom(); },
              ),
              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Snackbar",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _showSnackbar(); },
              ),
              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Dialog",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _showAlert(context, 'Ini Dialog'); },
              ),
              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Simple Dialog",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _askUser(); },
              ),
              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Sweet Alert",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _showSweetALert(context, 'ALert', 'Terima Kasih', SweetAlertStyle.success); },
              ),
              SizedBox(height: 30),

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Sweet Alert Confirm",
                icon: Icons.notifications,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () { _showSweetALert2(); },
              ),
              SizedBox(height: 30),




              ],
            ),
          ),
        ),
      ),
    );
  }
}

NAVIGATION

WIDGET

Navigator.push

NiceButton(
  radius: 40,
  padding: const EdgeInsets.all(15),
  text: "Profile",
  icon: Icons.people,
  background: Colors.blue,
  gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
  onPressed: () {
  Route route =
  MaterialPageRoute(builder: (context) => Profile());
  Navigator.push(context, route);
}),

Navigator.pop

NiceButton(
  radius: 40,
  padding: const EdgeInsets.all(15),
  text: "Back",
  icon: Icons.navigate_before,
  background: Colors.blue,
  gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
  onPressed: () {
  Navigator.pop(context);
}
),

WillPopScope

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }
  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

Full Code main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.dark, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "Navigation Widget";
  Color _bgColor = Colors.grey.shade100;


  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        color: _bgColor,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Profile",
                    icon: Icons.people,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      Route route =
                          MaterialPageRoute(builder: (context) => Profile());
                      Navigator.push(context, route);
                    }),
                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

profile.dart

import 'package:flutter/material.dart';
import 'package:nice_button/nice_button.dart';

class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  String _title = "Profile Page";
  Color _bgColor = Colors.yellow.shade100;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _layout(context),
    );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        color: _bgColor,
              child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                

              NiceButton(
                radius: 40,
                padding: const EdgeInsets.all(15),
                text: "Back",
                icon: Icons.navigate_before,
                background: Colors.blue,
                gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                onPressed: () {
                    Navigator.pop(context);
                }
              ),
              SizedBox(height: 30),

    


              ],
            ),
          ),
        ),
      ),
    );
  }
}

INPUT

WIDGET

TextField

                Container(
                  padding: EdgeInsets.all(10),
                  child: new TextField(
                  decoration: new InputDecoration(
                    labelText: 'Masukan Nama Kamu',
                    hintText: 'Masukan Nama Kamu',
                    icon: new Icon(Icons.message)
                  ),
                  autocorrect: true,
                  autofocus: true,
                  keyboardType: TextInputType.text,
                  onChanged: _onChange,
                )
                ),

CheckBox

                new CheckboxListTile(
                    value: _value,
                    onChanged: _cbChanged,
                    title: new Text('Setuju dengan persyaratan diatas'),
                  activeColor: Colors.blue,
                ),
                SizedBox(height: 30),

Full Code

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "Input Widget";
  Color _bgColor = Colors.white;
  bool _value = false;

  void _cbChanged(bool value){
    setState(() {
      _value = value;
      _title = _value.toString();
    });
  }

  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

  void _onChange(String value) {
    setState(() => _title = '${value}');
  }

  void _onSubmit() {
    if(_value){
      if(_title.isNotEmpty){
        SweetAlert.show(context,title: "Alert",subtitle: _title.toString(),style: SweetAlertStyle.success);
      }else{
        SweetAlert.show(context,title: "Alert",subtitle: 'Empty',style: SweetAlertStyle.error);
      } 
    }else{
      SweetAlert.show(context,title: "Alert",subtitle: 'Please cek persyatan diatas',style: SweetAlertStyle.error);
    }

  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }




  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[


                Container(
                  padding: EdgeInsets.all(10),
                  child: new TextField(
                  decoration: new InputDecoration(
                    labelText: 'Masukan Nama Kamu',
                    hintText: 'Masukan Nama Kamu',
                    icon: new Icon(Icons.message)
                  ),
                  autocorrect: true,
                  autofocus: true,
                  keyboardType: TextInputType.text,
                  onChanged: _onChange,
                )
                ),
                SizedBox(height: 30),


                new CheckboxListTile(
                    value: _value,
                    onChanged: _cbChanged,
                    title: new Text('Setuju dengan persyaratan diatas'),
                  activeColor: Colors.blue,
                ),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Submit",
                    icon: Icons.send,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _onSubmit();
                    }),
                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

STATE

MANAGEMENT

SEND DATA

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "State Management";
  TextEditingController _name;

  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

  @override
  void initState() { 
    super.initState();
    _name = new TextEditingController();
  }

  void _onPressed() {
    Navigator.push(context, new MaterialPageRoute(
        builder: (BuildContext context) => new Profile(_name.text),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }
  
  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                Container(
                  margin: EdgeInsets.all(10),
                                  child: new TextField(
                    controller: _name,
                    decoration: new InputDecoration(labelText: 'Enter your name'),
                  ),
                ),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Submit",
                    icon: Icons.send,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _onPressed();
                    }),
                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

profile.dart

import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';

class Profile extends StatefulWidget {
  Profile(this.name);
  String name;
  @override
  _ProfileState createState() => _ProfileState(name);
}

class _ProfileState extends State<Profile> {

  _ProfileState(this.name);
  String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(name),
        ),
        body: _layout(context),
      );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                new Text('Hello ${name}'),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Back",
                    icon: Icons.backspace,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      Navigator.of(context).pop();
                    }),
                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

GLOBAL STATE

globalstate.dart


class GlobalState {
  final Map<dynamic, dynamic> _data = {};

  static GlobalState instance = new GlobalState._();
  GlobalState._();

  set(key, value) => _data[key] = value;
  get(key) => _data[key];

}

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'profile.dart';
import 'globalstate.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Flutter Talk 01",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "State Management";
  TextEditingController _name;

  GlobalState _store = GlobalState.instance;

  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

  @override
  void initState() { 
    super.initState();
    _name = new TextEditingController();
    _store.set('value', 0);
  }

  void _increment() {
    int value = _store.get('value');
    value++;
    setState(() => _store.set('value', value));
  }

  void _decrement() {
    int value = _store.get('value');
    if(value>0) value--;
    setState(() => _store.set('value', value));
  }

  void _onPressed() {
    Navigator.push(context, new MaterialPageRoute(
        builder: (BuildContext context) => new Profile(_name.text),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                Container(
                  margin: EdgeInsets.all(10),
                                  child: new TextField(
                    controller: _name,
                    decoration: new InputDecoration(labelText: 'Enter your name'),
                  ),
                ),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Submit",
                    icon: Icons.send,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _onPressed();
                    }),
                SizedBox(height: 30),

                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "",
                    mini: true,
                    icon: Icons.arrow_drop_up,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _increment();
                    }),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "",
                    mini: true,
                    icon: Icons.arrow_drop_down,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _decrement();
                    }),

                  ],
                ),

              

                SizedBox(height: 30),

                new Text('Value ${_store.get('value')}',style: TextStyle(fontSize: 30),),

                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

profile.dart

import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'globalstate.dart';

class Profile extends StatefulWidget {
  Profile(this.name);
  String name;
  @override
  _ProfileState createState() => _ProfileState(name);
}

class _ProfileState extends State<Profile> {

  GlobalState _store = GlobalState.instance;

  _ProfileState(this.name);
  String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(name),
        ),
        body: _layout(context),
      );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                new Text('Name :  ${name}',style: TextStyle(fontSize: 30.0),),
                SizedBox(height: 30),

                new Text('Value : ${_store.get('value')}',style: TextStyle(fontSize: 30.0)),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Back",
                    icon: Icons.backspace,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      Navigator.of(context).pop();
                    }),
                SizedBox(height: 30),


              ],
            ),
          ),
        ),
      ),
    );
  }
}

STUDI KASUS

KALKULATOR ZAKAT

PUBSPEC.YAML

name: aplikasi_zakat
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  nice_button: ^0.1.7
  sweetalert: ^0.0.1
  pattern_formatter: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg


  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic

globalstate.dart


class GlobalState {
  final Map<dynamic, dynamic> _data = {};

  static GlobalState instance = new GlobalState._();
  GlobalState._();

  set(key, value) => _data[key] = value;
  get(key) => _data[key];

}

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'package:pattern_formatter/pattern_formatter.dart';
import 'globalstate.dart';
import 'hasil.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Kalkulator Zakat",
    theme: ThemeData(brightness: Brightness.light, primaryColor: Colors.blue),
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _title = "Kalkulator Zakat";

  final TextEditingController _name = new TextEditingController();
  final TextEditingController _total = new TextEditingController();

  GlobalState _store = GlobalState.instance;

  _onWillPop(){
      SweetAlert.show(context,
                subtitle: "Do you want to Exit Application?",
                style: SweetAlertStyle.confirm,
                showCancelButton: true, onPress: (bool isConfirm) {

                if(isConfirm){
                  SweetAlert.show(context,subtitle: "Exit App...", style: SweetAlertStyle.loading);
                  new Future.delayed(new Duration(seconds: 2),(){
                    exit(1);
                  });
                }else{
                  SweetAlert.show(context,subtitle: "Canceled!", style: SweetAlertStyle.error);
                }

                return false;
      });
  }

  @override
  void initState() { 
    super.initState();
    _store.set('value', 0);
  }

  void _hitungZakat() {
    num value = _store.get('value');
    num nilai = num.parse(_total.text.replaceAll(",", ""));

    if(nilai>=5240000){

      num zakat = (2.5/100) * nilai;
      value = zakat;
      setState(() => _store.set('value', value));

      Navigator.push(context, new MaterialPageRoute(
          builder: (BuildContext context) => new Hasil(),
      ));

    }else{
      String name = _name.text.toUpperCase().toString();
      SweetAlert.show(context,subtitle:" Pendapatan $name Belum mencapai Nishab", style: SweetAlertStyle.error);
    }

  }


  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _onWillPop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      ),
    );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                Container(
                  margin: EdgeInsets.all(5),
                  padding: EdgeInsets.all(10),
                  child: new TextField(
                    controller: _name,
                    decoration: new InputDecoration(labelText: 'Masukan Nama Kamu'),
                  ),
                ),


                Container(
                  margin: EdgeInsets.all(5),
                  padding: EdgeInsets.all(10),
                  child: new TextField(
                    controller: _total,
                    decoration: new InputDecoration(labelText: 'Masukan Total Pendapatan'),
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      ThousandsFormatter(allowFraction: true)
                    ],
                  ),
                ),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Hitung Zakat",
                    icon: Icons.refresh,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      _hitungZakat();
                    }),
                SizedBox(height: 30),

   

              ],
            ),
          ),
        ),
      ),
    );
  }
}

hasil.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sweetalert/sweetalert.dart';
import 'package:nice_button/nice_button.dart';
import 'globalstate.dart';

class Hasil extends StatefulWidget {
  @override
  _HasilState createState() => _HasilState();
}

class _HasilState extends State<Hasil> {

  String _title = "Hasil Kalkulasi";
  GlobalState _store = GlobalState.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: _layout(context),
      );
  }

  Widget _layout(BuildContext context) {
    return SafeArea(
      child: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[

                new Text('Total Zakat  : ${_store.get('value')}',style: TextStyle(fontSize: 30.0)),
                SizedBox(height: 30),

                NiceButton(
                    radius: 40,
                    padding: const EdgeInsets.all(15),
                    text: "Hitung Lagi",
                    icon: Icons.repeat,
                    background: Colors.blue,
                    gradientColors: [Color(0xff5b86e5), Color(0xff36d1dc)],
                    onPressed: () {
                      Navigator.pop(context);
                    }),
                SizedBox(height: 30),

   

              ],
            ),
          ),
        ),
      ),
    );
  }
}

RELEASE APK

flutter build apk
flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

Coding Talk #01 : ALL ABOUT WIDGET FLUTTER

By Maulana Ilham

Coding Talk #01 : ALL ABOUT WIDGET FLUTTER

ALL ABOUT WIDGET FLUTTER

  • 1,529