Sunday, November 22, 2020

ModalBottomSheet || Alert || SnackBar | Custom Dialog

  1. showModalBottomSheet 
  2. AlertDialog
  3. Custom Dialog
  4. Snackbar
...........................................................................................................................................................................................................................
Example : #1 [ showModalBottomSheet ]
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Bottom(),
    );
  }
}
class Bottom extends StatefulWidget {
  @override
  _BottomState createState() => _BottomState();
}
class _BottomState extends State<Bottom> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              RaisedButton(onPressed: () {
                _bottoSheet(context);
              })
            ],
          ),
        ),
      ),
    );
  }
  _bottoSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Wrap(
            children: [
              Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Login"),
                    Text("Login"),
                    Text("Login"),
                    Divider(
                      height: 2.0,
                    ),
                    Text("Login"),
                    Text("Login"),
                    Text("Login"),
                  ],
                ),
              ),
            ],
          );
        });
  }
}

...........................................................................................................................................................................................................................
Example : #2 [ AlertDialog]

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alert'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(onPressed: () {
              _alert(context);
            })
          ],
        ),
      ),
    );
  }

  _alert(BuildContext context) {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Alert'),
          content: Text('Write Something Message Here'),
          actions: [
            RaisedButton(
                child: Text('Okay'),
                onPressed: () {
                  Navigator.of(context).pop();
                })
          ],
        );
      },
    );
  }
}



...........................................................................................................................................................................................................................
Example : #3 [ showSnackbar  ]
  • Global Key
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  GlobalKey<ScaffoldState> _globalKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text('SnackBar'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Login'),
          onPressed: () {
            _globalKey.currentState.showSnackBar(SnackBar(
              content: Text('Iam Snack Bar'),
              duration: Duration(seconds: 3),
              ));
          },
        ),
      ),
    );
  }
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example : #4 [ Snackbar ]
  • Split a build function
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar'),
      ),
      body: Snackbarpage(),
    );
  }
}

class Snackbarpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('Login'),
        onPressed: () {
          SnackBar snackBar = SnackBar(
            content: Text('I am Snack Bar'),
            duration: Duration(seconds: 3),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {},
            ),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        },
      ),
    );
  }
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example : #5 [ Snackbar ]
Builder Widget
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar'),
      ),
      body: Column(
        children: [
          Builder(
            builder: (context) {
              return RaisedButton(onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text('Show Snack Bar..'),
                  duration: Duration(seconds: 3),
                  ));
              });
            },
          ),
        ],
      ),
    );
  }
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example : #6 [ Dialog]
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  void showSimpleDialog(BuildContext context) =>showDialog(
      context: context,
      child: SimpleDialog(
        title: Text('Simple options'),
        children: [
          SimpleDialogOption(
            padding: EdgeInsets.symmetric(horizontal: 25, vertical: 25),
            child: Text('Option 1'),
          ),
          SimpleDialogOption(
            child: Text('Option 1'),
          ),
        ],
      ),
    );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Dialog'),
        ),
        body: Center(
          child: Column(
            children: [
              RaisedButton(
                  child: Text('Simple Dialog'),
                  color: Colors.deepOrange,
                  onPressed: () => showSimpleDialog(context))
            ],
          ),
        ));
  }
}
Happy Coding :)
...........................................................................................................................................................................................................................
Example : #7 [ showModalBottomSheet ]




...........................................................................................................................................................................................................................
Example : #8 [ showModalBottomSheet ]



...........................................................................................................................................................................................................................
Example : #9 [ showModalBottomSheet ]







No comments:

Post a Comment