Блог

Я хочу реализовать навигационный ящик в flutter, как на этом скриншоте. Но не знаю как. Пожалуйста, дайте мне какой-нибудь кодовый намек. Спасибо.

Это изображение, которое я люблю архивировать

используйте виджет ящика в scaffold это пример из официальной документации

 Scaffold(
  appBar: AppBar(
    title: const Text('Drawer Demo'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text(
            'Drawer Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
            ),
          ),
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text('Messages'),
        ),
        ListTile(
          leading: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
        ),
      ],
    ),
  ),
);
 

это и есть результат =>

Вы должны использовать Drawer виджет.

 Scaffold(
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        ListTile(
          title: const Text('Item 1'),
          onTap: (){
            // do something
          },
        ),
        ListTile(
          title: const Text('Item 2'),
          onTap: (){
            // do something
          },
        ),
      ],
    ),
  ),
...
 

И это в значительной степени все! Узнайте больше об Drawer этом здесь.

Легко заархивировать это с помощью другого Scaffold на теле и использовать drawer там. И для контроля использования выдвижного ScaffoldState GlobalKey ящика .

Результат

Виджет

 
class _MyApp extends StatefulWidget {
  @override
  State<_MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<_MyApp> {
  static final GlobalKey<ScaffoldState> _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () {
              if (_key.currentState != null) {
                if (_key.currentState!.isDrawerOpen) {
                  Navigator.pop(_key.currentContext!);
                } else {
                  _key.currentState!.openDrawer();
                }
              }
            },
            icon: const Icon(
              Icons.more,
            ),
          ),
        ),
        body: Scaffold(
          key: _key,
          drawer: Drawer(
            child: Container(
              color: Colors.red,
            ),
          ),
          body: Column(
            children: const [
              Text("Child"),
            ],
          ),
        ));
  }
}