Flutter & Dart: Навигация и меню в приложении (Урок 9)

Навигация между страницами

В приложении пока одна страница, home. Создадим стартовую страницу с переходом на home (список дел). Для этого создадим новую страницу.

Добавим в папку pages файл main_screen.dart. Импортируем material.dart:

import 'package:flutter/material.dart';

Создадим простой виджет:

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Main Screen',
              style: TextStyle(color: Colors.white),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/todo');
              },
              child: Text('Перейти далее'),
            ),
          ],
        ),
      ),
    );
  }
}

В main.dart подключим main_screen.dart:

import 'main_screen.dart';

Укажем страницы приложения в свойстве routes:

MaterialApp(
  routes: {
    '/': (context) => MainScreen(),
    '/todo': (context) => Home(),
  },
  initialRoute: '/',
);

Здесь / — путь к главной странице (MainScreen), /todo — путь к странице Home. initialRoute: ‘/’ задаёт стартовую страницу.

Запустим приложение. Нажатие на кнопку «Перейти далее» переведёт на страницу /todo. Переход осуществляется наложением страниц, с кнопкой «назад».

Альтернативные методы навигации

Помимо pushNamed, есть pushReplacementNamed для полной замены текущей страницы без возможности вернуться назад, и pushAndRemoveUntil для удаления предыдущих страниц из истории навигации. pushAndRemoveUntil принимает булевый параметр, определяющий наличие кнопки «назад».

Создание меню

Создадим меню в AppBar, используя свойство actions:

AppBar(
  title: Text('Меню'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.menu),
      onPressed: menuOpen,
    ),
  ],
);

Метод menuOpen открывает выезжающее меню:

void menuOpen(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          AppBar(
            title: Text('Меню'),
          ),
          ListTile(
            title: Text('На главную'),
            onTap: () {
              Navigator.pushReplacementNamed(context, '/');
            },
          ),
          ListTile(
            title: Text('Наше простое меню'),
          ),
        ],
      );
    },
  );
}

Меню отображается как отдельное модальное окно. Можно добавить элементы и стили.

В приложении реализована навигация и функциональное меню. Экспериментируйте с методами навигации и стилями меню.