#android #flutter #dart #user-interface
Вопрос:
Могу ли я открыть страницу со значками, когда я нажимаю на место, которое я нарисовал красным на картинке, например, на нижней панели навигации в 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. Пожалуйста, отметьте вопрос как ответ, если это решило вашу проблему, или попросите более подробную информацию, если вы все еще боретесь