Flutter uses Navigator to locally jump to pages

The Navigator component is not used very often, but it is very useful in some scenarios, such as local forms with multiple pages filled in, the bottom navigation always exists, and each TAB navigates its own scene.

Navigator.of(context) is used directly to jump to the page. You can use navigator. of(context) directly because you use this control in WidgetsApp. The root control of the application is usually the MaterialApp, which contains WidgetsApp, so you can use the related properties of the Navigator directly.

The use of Navigator is very simple, as follows:

Navigator(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    WidgetBuilder builder;
    switch (settings.name) {
      case 'home':
        builder = (context) => PageA();
        break;
      case 'user':
        builder = (context) => PageB();
        break;
    }
    returnMaterialPageRoute(builder: builder, settings: settings); },)Copy the code

InitialRoute indicates the initialRoute, and onGenerateRoute indicates the route generated according to RouteSettings.

So when do you need to use Navigator? Use Navigator where local page jumps are required, as follows:

Headline client reporting scenario

There is a “cross” under each news in toutiao client. Click to pop up relevant information. Click part of it, and it will jump to the report page in the current small window, with the following effect:

This scenario is typical of using Navigator. Click report, and instead of switching the page in full screen, just switch the page that pops up.

The home page code is as follows:

@override
Widget build(BuildContext context) {
  return Center(
    child: Container(
      height: 350,
      width: 300,
      child: Navigator(
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settins) {
          WidgetBuilder builder;
          switch (settins.name) {
            case '/':
              builder = (context) => PageC();
              break;
          }
          returnMaterialPageRoute(builder: builder); },),),); }Copy the code

The initial route of Navigator is PageC page, which has the following code:

class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          children: <Widget>[
            _buildItem(Icons.clear, 'Not interested'.'Reduce this type of content'),
            Divider(),
            _buildItem(Icons.access_alarm, 'report'.'Exaggerated headlines, poor content quality, etc.',
                showArrow: true, onPress: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return PageD();
              }));
            }),
            Divider(),
            _buildItem(Icons.perm_identity, 'Block author: Xinhuanet client'.' '),
            Divider(),
            _buildItem(Icons.account_circle, 'shield'.'Military video, pilots, etc.'[[(), [(), [(), [(); } _buildItem(IconData iconData,String title, String content,
      {bool showArrow = false.Function onPress}) {
    return Row(
      children: <Widget>[
        Icon(iconData),
        SizedBox(
          width: 20,
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(fontSize: 18),
              ),
              Text(
                content,
                style: TextStyle(
                    color: Colors.black.withOpacity(. 5), fontSize: 14() [() [() showArrow ? Container() : IconButton( icon: Icon(Icons.arrow_forward_ios), iconSize:16, onPressed: onPress, ), ], ); }}Copy the code

The PageC page displays the PageD page. The PageD page code is as follows:

class PageD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 250,
      color: Colors.grey.withOpacity(. 5),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_back_ios),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              Text('return'),
              SizedBox(
                width: 30,
              ),
              Text('report'() [[[() [() [() [() }}Copy the code

Finally, the local jump effect is achieved, only changing in the middle region, the other regions remain unchanged.

In the Tab to jump

Another typical application scenario is the Tab jump, which looks like this:

Bottom navigation is always there, and each TAB has its own navigator.

The home page code is as follows:

class TabMain extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabMainState();
}

class _TabMainState extends State<TabMain> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[
          TabNavigator(0),
          TabNavigator(1),
          TabNavigator(2),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('home'), icon: Icon(Icons.home)),
          BottomNavigationBarItem(title: Text('books'), icon: Icon(Icons.book)),
          BottomNavigationBarItem(
              title: Text('I'), icon: Icon(Icons.perm_identity)), ], ), ); }}Copy the code

The home page defines 3 tabs and switching effects.

Define the TabNavigator:

class TabNavigator extends StatelessWidget {
  TabNavigator(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settins) {
        WidgetBuilder builder;
        switch (settins.name) {
          case '/':
            builder = (context) => ListPage(index);
            break;
        }
        returnMaterialPageRoute(builder: builder); }); }}Copy the code

List page, this page is usually a List page, click one of them to jump to the relevant details page, here for simplicity, only put a jump button:

class ListPage extends StatelessWidget {
  ListPage(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('$index'),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              returnDetailPage(); })); },),),); }}Copy the code

Details page

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('DetailPage'),),); }}Copy the code

Although the Navigator control is not particularly common, it is useful in some scenarios.

communication

Old Meng Flutter blog address (nearly 300 controls usage) : laomengit.com