Flutter Widget 101 Part 5 (Snackbars, Context, Builder and Key)

1. Aim

Through Snackbar, understand Context and how to use builder to access any context of a widget.

2.Snackbar

Code from Codelab
If you use Scaffold.of(context), there will be Context Error



"Scaffold.of() called with a context that does not contain a Scaffold"






import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new SnackApp()));
}

class SnackApp extends StatefulWidget {
  @override  _SnackAppState createState() => _SnackAppState();
}

class _SnackAppState extends State<SnackApp> {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Snackbar exercise"),
      ),
      body: 
        new Center(
          child: new RaisedButton(

            onPressed: (){
              final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
              Scaffold.of(context).showSnackBar(snackBar);
            },
            child: new Text("Show Snackbar"),
          ),
        ),
    );
  }
}








This is because thecontext is of the parent widget that instantiated Scaffold. Not the contextof a child of Scaffold.Scaffold is not created yet.
Solution 1. Use Builder.

3.Builder


What is a builder

A platonic (simplest possible thing of that kind) widget that calls a closure (lambda/anonymous function)  to obtain its child widget.

Widget and Context



In the Flutter framework, every widget has a build method that accepts a BuildContext parameter:





Widget build ( BuildContext context ) { ... }






This context object is passed to the widget's build function automatically by the framework. Hence there is no reason for any widget to have a constructor or function (aside from build) that would need to accept a context parameter.  



Thus you would not be able to pass a specific context object to a child.



You cannot call build() and pass your own context object manually without calling the build function twice (Your manual call and automatic call by the framework).



Thus you would not be able to pass a specific context object to a child.



You cannot call build() and pass your own context object manually without calling the build function twice (Your manual call and automatic call by the framework).



Purpose of Builder class



So, how can we pass a specific context object? 



Use Builder class to build and return child widgets.  This will pass a specific context object down to its children. The Builder class is basically your own build function that you setup. 



How?

Builder gives Child (Snackbar) access to/pass context of Parent (Scaffold) widget



Builder class constructor:





Builder({Key key, @required WidgetBuilder builder })





creates a widget by delegating its build to the callback function passed through its constructor. 


    

  1. Contains a BuildContext context parameter
    2. 



    

  1. Builds and returns child widget(s) based on that context passed.
    2. 







--------------------------------







Solution 1 (Passing Context via Builder)






import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new SnackApp()));
}

class SnackApp extends StatefulWidget {
  @override  _SnackAppState createState() => _SnackAppState();
}

class _SnackAppState extends State<SnackApp> {
  @override  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Snackbar exercise"),
      ),
      body: Builder(builder: (context){
        return new Center(
          child: new RaisedButton(

            onPressed: (){
              final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));
              Scaffold.of(context).showSnackBar(snackBar);
            },
            child: new Text("Show Snackbar"),
          ),
        );
      }),
    );
  }
}





4. Key



What is a Key?



A Key is an identifier for Widgets, Elements (Instantiation of Widget) and SemanticsNode. 












A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.







Usage of Key



Control matching of widgets by framework during rebuilds.  



Flutter matches widgets according to runtimeType, key and order of appearance.









Most useful in widgets that build many instances of the same type of widget. E.g. ShoppingList widget, builds many ShoppingListItem instances to fit screen.







Without key, Flutter would not know which element in list is removed.





Type of Keys






    

  • Key
    • 

  • GlobalKey
    • 

  • ValueKey
    • 

  • ObjectKey (e.g. of usage)
    • 

  • UniqueKey
    • 








Global Key

Expensive process



Allows element to be moved around (Unique global key in tree) without losing the state (Able to retrieve state).





Usage of Global Key

As Global Key is expensive.  Use it only when it matters e.g. Validation of Form



Solution 2 (Identifier through Global Key)






import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new SnackApp()));
}

class SnackApp extends StatefulWidget {
  @override  _SnackAppState createState() => _SnackAppState();
}

class _SnackAppState extends State<SnackApp> {

  final GlobalKey<ScaffoldState> _skey1 = GlobalKey<ScaffoldState>();

  void snackm(){
    _skey1.currentState.showSnackBar(SnackBar(content: Text('Yay! A SnackBar!')));
  }

  @override  Widget build(BuildContext context) {
    return new Scaffold(
      key: _skey1,
      appBar: new AppBar(
        title: new Text("Snackbar exercise"),
      ),
      body: Builder(builder: (context){
        return new Center(
          child: new RaisedButton(
            onPressed: (){
              //snackm();              _skey1.currentState.showSnackBar(SnackBar(content: Text('Yay! A SnackBar!')));
            },
            child: new Text("Show Snackbar"),
          ),
        );
      }),
    );
  }
}





Flutter Links:























































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