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

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 2 (List and Stack)

1. List For type of list : Function (Why?) Small List: ListView (Create all at once) Large List: ListView.itembuilder (Create item as they are scrolled onto screen) What is ListView.itembuilder : Way to make list of Widgets/Children on demand. Widget are not static, can be called multiple times based on itemCount and return different widget at each call. Made up of ItemCount and ItemBuilder. ItemCo unt: decide how many times callback function of ItemBuilder is called Based on code below, itemBuilder would be called back 4 times (itemCount is equivalent to length of list) Why? to estimate maximum scroll extent ItemBuilder : Consist of Context and Index Abstract of IndexedWidgetBuilder, signature for function that create Widget for a given index. Index can be used to indicate location. Link to solution to position of list lost after bottom navigation. Index issue List<String> litems = ["1","2","Third","4"];...
Read more

Animation Class: AppBar and Tabbar

App Bar https://flutter.io/docs/catalog/samples/basic-app-bar https://material.io/design/components/app-bars-top.html#theming https://docs.flutter.io/flutter/material/AppBar-class.html The AppBar displays the toolbar widgets leading title actions bottom   TabBar . Declaring new method inside widget by (){}; void main(){ runApp( new MaterialApp(home: new AppTest1())); } class AppTest1 extends StatefulWidget { @override _AppTest1State createState() => _AppTest1State(); } class _AppTest1State extends State<AppTest1> { String bodyText = " " ; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( backgroundColor: Colors. red , leading: new Icon (Icons. laptop_chromebook ), title: new Text( "Appbar Title" ), //centerTitle: true, //titleSpacing: 80.0, elevation: 10.00 , actions: <Widget>[ new IconButton(icon: new Icon(...
Read more