Navigation in Flutter

How do we navigate within route ?
   Navigator widget helps in navigation between the routes.
A navigator can push and pop routes to help a user move from screen to screen, although you can override or implement your own custom navigation behavior too.


  /// Creates a [Category].  ///  /// A [Category] saves the name of the Category (e.g. 'Length'), its color for  /// the UI, and the icon that represents it (e.g. a ruler).  const Category({
    Key key,    @required this.name,    @required this.color,    @required this.iconLocation,    @required this.units  })  : assert(name != null),        assert(color != null),        assert(iconLocation != null),        assert(units != null),        super(key: key);
  // Navigates to the [ConverterRoute]  void _navigateToConverter(BuildContext context){
    // Navigation 1.  Using the Navigator, navigate to the [ConverterRoute]    Navigator.of(context).push(MaterialPageRoute<Null>(
      builder: (BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            elevation: 1.0,            title: Text(
              name,              style: Theme.of(context).textTheme.display1,            ),            centerTitle: true,            backgroundColor: color,          ),          body: ConverterRoute(
            color: color,            units: units,          ),        );      },    ));  }

  /// Builds a custom widget that shows [Category] information.  ///  /// This information includes the icon, name, and color for the [Category].  @override  // This `context` parameter describes the location of this widget in the  // widget tree. It can be used for obtaining Theme data from the nearest  // Theme ancestor in the tree. Below, we obtain the display1 text theme.  // See https://docs.flutter.io/flutter/material/Theme-class.html  Widget build(BuildContext context) {
    // Build the custom widget here, referring to the Specs.    assert(debugCheckHasMaterial(context));    return Material(
      color: Colors.transparent,      child: Container(
        height: _rowHeight,        child: InkWell(
          borderRadius: _borderRadius,          highlightColor: color[50],          splashColor: color[100],          // We can use either the () => function() or the () { function(); }          // syntax.          // Navigator 2. Update this onTap property to call _navigateToConverter()
          onTap: () => _navigateToConverter(context),          child: Padding(
            padding: EdgeInsets.all(8.0),            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,              // There are two ways to denote a list: `[]` and `List()`.              // Prefer to use the literal syntax, i.e. `[]`, instead of `List()`.              // You can add the type argument if you'd like, i.e. <Widget>[].              // See https://www.dartlang.org/guides/language/effective-dart/usage#do-use-collection-literals-when-possible              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(16.0),                  child: Icon(
                    iconLocation,                    size: 60.0,                  ),                ),                Center(
                  child: Text(
                    name,                    textAlign: TextAlign.center,                    style: Theme.of(context).textTheme.headline,                  ),                )
              ],            ),          ),        ),      ),    );  }
}

Comments

Popular Posts