반응형
사이드 메뉴바를 펄럭이는 방법은?
나는 설레이는 것이 처음이고 사이드 메뉴를 열기 위해 메뉴 버튼을 만들었지만, 그러기 위해서는 도움이 필요하다.
구현하는 것을 도와주거나 작동하는 방법에 대한 코드를 안내해줄 수 있는 사람이 있나요? 정말 감사합니다!
제 코드는 다음과 같습니다.
Widget _icon(IconData icon, {Color color = LightColor.iconColor}) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(13)),
color: Theme.of(context).backgroundColor,
boxShadow: AppTheme.shadow),
child: Icon(
icon,
color: color,
),
);
}
주:
class _MainPageState extends State<MainPage> {
bool isHomePageSelected = true;
Widget _appBar() {
return Container(
padding: AppTheme.padding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RotatedBox(
quarterTurns: 4,
child: _icon(Icons.menu, color: Colors.black54),
),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(13)),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xfff8f8f8),
blurRadius: 10,
spreadRadius: 10),
],
),
),
)
],
),
);
}
아래의 전체 코드 실행 붙여넣기를 복사할 수 있습니다. 사용하고 호출할 수 있습니다.
코드 조각
GlobalKey<ScaffoldState> _key = GlobalKey();
...
child: InkWell(
onTap: () {
_key.currentState.openDrawer();
},
작업 데모
풀 코드
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
GlobalKey<ScaffoldState> _key = GlobalKey();
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget _icon(IconData icon, {Color color = Colors.blue}) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(13)),
color: Theme.of(context).backgroundColor,
//boxShadow: AppTheme.shadow
),
child: InkWell(
onTap: () {
_key.currentState.openDrawer();
},
child: Icon(
icon,
color: color,
),
),
);
}
bool isHomePageSelected = true;
Widget _appBar() {
return Container(
//padding: AppTheme.padding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RotatedBox(
quarterTurns: 4,
child: _icon(Icons.menu, color: Colors.black54),
),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(13)),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xfff8f8f8),
blurRadius: 10,
spreadRadius: 10),
],
),
),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(leading: _appBar()),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
다음 코드 사용:
Scaffold.of(context).openDrawer();
참조:
권장되는 방법은 전화하는 것입니다.
샘플 코드:
drawer: const NavBar(), // Your nav bar here
appBar: AppBar(
title: "Home".appBarText(),
leading: Builder(builder: (context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
반응형
'개발하자' 카테고리의 다른 글
Uvicorn + Fast를 종료하는 방법pytest로 테스트 시 workers > = 2로 API를 깔끔하게 적용 (0) | 2022.12.12 |
---|---|
Flot Firebase Auth Exception의 오류 코드는 무엇입니까? (0) | 2022.12.11 |
Azure CNI 네트워크 정책을 사용하여 Kubernetes 포드에서 특정 FQDN/DNS로의 송신만 허용 (0) | 2022.12.10 |
react.js로 svelt store를 사용하는 방법 (0) | 2022.12.09 |
파이썬에서 gRPC "하나의" 프로토 구조를 어떻게 사용할 수 있나요? (0) | 2022.12.09 |