Cui User Interaction - Flutter Core

By pjain      Published May 10, 2020, 11 p.m. in blog Programming   

Cui User Interaction Overview

Snackbars, Toasts

Snackbar EX

  • On an event, eg button press, to use the Scaffold key to show a message from anywhere in widget tree to a Snackbar labelled window at bottom.
class xyzApp extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scafKey = GlobalKey<ScaffoldState>();
  @override  Widget build(BuildContext context) {
    return MaterialApp(  title: 'SnackBar',
      home: Scaffold(
        key: _scafKey,
        backgroundColor: Colors.greenAccent,
        appBar: AppBar( title: Text('SnackBar'), ),
        body: Center(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text( 'Hit below Button', style: TextStyle(fontSize: 25.0), ),
                RaisedButton( child: Text('Hit Me'), color: Colors.blue, //rButton() <-- start wrap here ... need to pass in context
                  onPressed: () {  _scafKey.currentState.showSnackBar(   SnackBar(
                          content: Text('This is SnackBar'),
                          duration: Duration(seconds: 3),
                          backgroundColor: Colors.purpleAccent,
                   ));  },
                ),  //rButton() <-- end wraps here ... 
              ], // Widget
           ),   ), ), //column, container, center body
      ), //scaffold
    ); // material App
  } //build
} // xyzApp class

    // UTILITY snackbar display given scaffold
class rButton extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return RaisedButton( child: Text('Hit Me'), color: Colors.blue,
      onPressed: () {  Scaffold.of(context).showSnackBar(    SnackBar(
                  content: Text('This is SnackBar'),
                  duration: Duration(seconds: 3),
                  backgroundColor: Colors.purpleAccent,
        ));   },
    );
  }
}

Dialogs

showDialogfunction - goMDK Manual

showDialogfunction takes a builder which typically builds a Dialog widget. Content below the dialog is dimmed with a ModalBarrier. The widget returned by the builder does not share a context with the location that showDialog is originally called from.The context argument is used to look up the Navigator and Theme for the dialog. It is only used when the method is called. Its corresponding widget can be safely removed from the tree before the dialog is closed.

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

Future<void> _ackAlert(BuildContext context) {
  return showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Not in stock'),
        content: const Text('This item is no longer available'),
        actions: <Widget>[
          FlatButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}
enum ConfirmAction { CANCEL, ACCEPT }
Future<ConfirmAction> _asyncConfirmDialog(BuildContext context) async {
  return showDialog<ConfirmAction>(
    context: context,
    barrierDismissible: false, // user must tap button for close dialog!
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Reset settings?'),
        content: const Text(
            'This will reset your device to its default factory settings.'),
        actions: <Widget>[
          FlatButton(
            child: const Text('CANCEL'),
            onPressed: () {
              Navigator.of(context).pop(ConfirmAction.CANCEL);
            },
          ),
          FlatButton(
            child: const Text('ACCEPT'),
            onPressed: () {
              Navigator.of(context).pop(ConfirmAction.ACCEPT);
            },
          )
        ],
      );
    },
  );
}

Future<String> _asyncInputDialog(BuildContext context) async {
  String teamName = '';
  return showDialog<String>(
    context: context,
    barrierDismissible: false, // dialog is dismissible with a tap on the barrier
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Enter current team'),
        content: new Row(
          children: <Widget>[
            new Expanded(
                child: new TextField(
              autofocus: true,
              decoration: new InputDecoration(
                  labelText: 'Team Name', hintText: 'eg. Juventus F.C.'),
              onChanged: (value) {
                teamName = value;
              },
            ))
          ],
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('Ok'),
            onPressed: () {
              Navigator.of(context).pop(teamName);
            },
          ),
        ],
      );
    },
  );
}

enum Departments { Production, Research, Purchasing, Marketing, Accounting }
Future<Departments> _asyncSimpleDialog(BuildContext context) async {
  return await showDialog<Departments>(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text('Select Departments '),
          children: <Widget>[
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, Departments.Production);
              },
              child: const Text('Production'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, Departments.Research);
              },
              child: const Text('Research'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, Departments.Purchasing);
              },
              child: const Text('Purchasing'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, Departments.Marketing);
              },
              child: const Text('Marketing'),
            ),
            SimpleDialogOption(
              onPressed: () {
                Navigator.pop(context, Departments.Accounting);
              },
              child: const Text('Accounting'),
            )
          ],
        );
      });
}

class MyApp extends StatelessWidget {
  @override Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Dialog"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              child: const Text("Ack Dialog"),
              onPressed: () {
                _ackAlert(context);
              },
            ),
            new RaisedButton(
              child: const Text("Confirm Dialog"),
              onPressed: () async {
                final ConfirmAction action = await _asyncConfirmDialog(context);
                print("Confirm Action $action" );
              },
            ),
            new RaisedButton(
              child: const Text("Simple dialog"),
              onPressed: () async {
                final Departments deptName = await _asyncSimpleDialog(context);
                print("Selected Departement is $deptName");
              },
            ),
            new RaisedButton(
              child: const Text("Input Dialog"),
              onPressed: () async {
                final String currentTeam = await _asyncInputDialog(context);
                print("Current team name is $currentTeam");
              },
            ),
          ],
        ),
      ),
    );
  }
}

0 comments

There are no comments yet

Add new comment

Similar posts

List++ Advanced Application Features

Interview Questions in Flutter

NAV: URL Launcher, Deep Links

NAV: Navigation Drawers