Flutter Widget 101 Part 6 (Alert and Simple Dialog)


https://medium.com/@nils.backe/flutter-alert-dialogs-9b0bb9b01d28

https://stackoverflow.com/questions/50964365/alert-dialog-with-rounded-corners-in-flutter

Dialogs

In essence, dialogs are pop-up for further user verification/notification.

There are few types of dialogs:
  1. AlertDialog (rows of buttons below body).
  2. SimpleDialog (handles scrolling of contents and no buttons below body).
  3. showCupertinoDialog (iOS-style).
  4. showGeneralDialog (allows customisations).

showDialog ()

3 Parameters. child is deprecated.  Return child from builder, example below.
BuildContext context,
Widget child,//deprecated WidgetBuilder builder,

showDialog(
    context:context,
    barrierDismissible: true,
    builder: (BuildContext context)
      {
      return AlertDialog(
        content: new Text("Welcome"),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.launch),
              onPressed: (){Navigator.pop(context);}
          ),
        ],
      );
      });

AlertDialog

Limitation:
Limited content (vertical) else Title and Action would overflow.

Snackbar inside AlertDialog
http://cogitas.net/show-snackbar-flutter/
https://stackoverflow.com/questions/52223152/how-to-show-a-snackbar-from-async-executions-when-no-context-is-available/
https://blog.csdn.net/mp624183768/article/details/86289860

SimpleDialog

Common Issues: Updating with setState

More Examples

Comments

Post a Comment

Popular posts from this blog

Setting up Terminal in Android Studio for Flutter and Bash Profile (For Mac)

Does your Commands in Android Studio not worked? Fret not, all you need to do is the following from Command Prompt: 1. Do you have a Bash Profile?] Go into your  user folder in finder . The .bash_profile file should be findable there. ->  HD/Users/[USERNAME] To reveal hidden file, press: Command + Shift + . nano .bashprofile or nano .bash_profile 2. Paste the correct directory export PATH=~/ Users/rigmiklos/Documents/ flutter/bin:$PATH Red Text: Directory contain flutter folder Hint for Mac User: Double tap on the Flutter.exe in Flutter>Bin>Flutter, and press"Get Info" to get Directory. 3. Ctrl + X to exit (No, this is not for default paste function) 4. Press Y to save changes. 5. To reload source .bashprofile Advance Reading for Bash Profile Official Doc for Setting up To navigate around Mac Command prompt: ls: show folders cd "folder name": to change directory Solution: Run Flutter Doctor manually or by Terminal / Users/...
Read more

Flutter Widget 101 Part 1 (Basic of Flutters, Layouts, Rows and Columns)

Image
1. What every programme starts with void main() => runApp( new MyApp()); "=>" is an operator and it  denotes   { return  expr ; } . () denotes method runApp will run MyApp() which is a widget. Besides running MyApp(), you can also play with runApp() function by doing the following: new Text(). Do remember to include the TextDirection. Text will appear on the top left hand corner of the screen. void main() { runApp( new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)); } Make it centralised in the center through the following. void main() => runApp( new Center( child: new Text( 'Hello World' ,textDirection: TextDirection. ltr ,) ) ); 2.Declaring App/Widget to be run in runApp() void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return null ; } } extends is the inheriting of...
Read more

Flutter Widget 101 Part 4 (Navigation and Drawers)

1. Drawer Official Doc Material Design has 2 mode of navigation, Tabs or/and Drawer. Drawer slide in horizontally Use ListView (Scrollable) or Column as Child ListTitle for each single row Details of User can be displayed with DrawerHeader , UserAccountsDrawerHeader onTap Behaviour can be set Wrapper: Material App > Scaffold > Drawer > ListView Drawer: When tapped on row, will change Text in Main Page void main(){ runApp( new MaterialApp(home: new DrawerTemp()),); } class DrawerTemp extends StatefulWidget { @override _DrawerTempState createState() => _DrawerTempState(); } class _DrawerTempState extends State<DrawerTemp> { String TextValue = "Original" ; @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: new Text( "Drawer Test" ), backgroundColor: Colors. lightBlueAccent , ), drawer: new Drawer( child: new ListView( ...
Read more