другая панель навигации во флаттере

#android #flutter #dart #user-interface

Вопрос:

1

Могу ли я открыть страницу со значками, когда я нажимаю на место, которое я нарисовал красным на картинке, например, на нижней панели навигации в Instagram, но я хочу, чтобы моя была такой же, как на картинке

Комментарии:

1. Мне нужна навигационная панель, которая открывается слева на экране, когда я нажимаю на левый треугольник

Ответ №1:

Что вам нужно сделать, так это:

  • добавьте ящик к вашим подмосткам
  • добавьте в свой виджет глобальный ключ, который вы будете использовать для открытия ящика
  • Удалите кнопку меню панели приложений, если вы не хотите, чтобы она там была
  • Добавьте кнопку и поместите ее в свое тело
 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  //Add GlobalKey which you will use to open the drawer
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Set GlobalKey
      key: _scaffoldKey,
   

      appBar: AppBar(title: Text(title), 
      //This will remove the AppBar menu button
      automaticallyImplyLeading: false,),
      body:
      Center(child: 
      Container(
        width: double.infinity,
        alignment: Alignment.centerLeft,
        child: InkWell(
          //This function will open the Side Menu
          onTap: ()=> _scaffoldKey.currentState?.openDrawer()
          ,
                  child: Icon(
            Icons.menu,
            size: 20,
          ),
        ),
      ),
            ),
      //Add Drawer to your Scaffold
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}
 

Комментарии:

1. Не можете сделать треугольник вместо значка?

2. Лучший способ сделать это-импортировать «изображение» актива, которое вы хотите, чтобы кнопка выглядела так, как будто вы можете нарисовать ее пользовательской краской, но я не думаю, что это лучшее решение

3. Пожалуйста, отметьте вопрос как ответ, если это решило вашу проблему, или попросите более подробную информацию, если вы все еще боретесь