[Flutter/ํ”Œ๋Ÿฌํ„ฐ] Drawer menu ๋งŒ๋“ค๊ธฐ!

2022. 4. 6. 00:38ยท ๊ฐœ๋ฐœ/Flutter
๋ชฉ์ฐจ
  1. โ—พ ์™„์„ฑ๋ชจ์Šต
  2. โ—พ ๊ธฐ๋ณธ ๊ตฌ์„ฑ
  3. โ—พ Code
728x90
๋ฐ˜์‘ํ˜•

โ—พ ์™„์„ฑ๋ชจ์Šต

 

์•ž์„œ ์•„์ด์ฝ˜์„ ๋„ฃ์–ด์„œ ๋งŒ๋“  ๋ฉ”๋‰ด์— ํ–„๋ฒ„๊ฑฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์‚ฌ์ด๋“œ๋กœ ์—ด๋ฆฌ๋Š” ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค! flutter์—์„œ๋Š” drawer์ด๋ผ๋Š” ๊ฒƒ์œผ๋กœ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ๊ฐ€ ์žˆ๋‹ต๋‹ˆ๋‹ค!

 

 

 

โ—พ ๊ธฐ๋ณธ ๊ตฌ์„ฑ

 

 

drawer ์„ ๋งŒ๋“ค๊ณ , ๊ทธ ์•ˆ์— ์ž์‹ ์œ„์ ฏ(child)์œผ๋กœ ListView๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. ๊ทธ ์ž์‹ ์œ„์ ฏ ์•ˆ์— ๋˜ ๋‹ค๋ฅธ ํ•˜์œ„ ์œ„์ ฏ(children)์„ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค. ListView๋Š” ๋‘๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ์ด ๋ฉ๋‹ˆ๋‹ค. ์ผ๋‹จ Header๋ถ€๋ถ„์—์„œ ๊ณ„์ •์ด๋ฆ„, ํ”„๋กœํ•„ ์‚ฌ์ง„ ๋“ฑ์„ ๋„ฃ์–ด์ฃผ๊ณ , ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋‰ด๋ฅผ ListTile์ด๋ผ๋Š” ์ด๋ฆ„ ์•„๋ž˜ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค ListTile๊ตฌ์„ฑ์— ๋ณด์‹œ๋ฉด onTap์ด ์žˆ๋Š”๋ฐ, ์ด ๋ถ€๋ถ„์€ ๋‚˜์ค‘์— ๊ฐ€๋ฉด ๋” ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•  ์˜ˆ์ •์ด์ง€๋งŒ ๊ฐ„๋‹จํ•˜๊ฒŒ onPressed์™€ ๋น„๊ตํ•ด๋ณด์ž๋ฉด  onPressed๋Š” ์ฃผ๋กœ ๋ฒ„ํŠผ์— ์‚ฌ์šฉ์ด ๋˜๊ณ  onTap์€ ์ œ์Šค์ณ๊ฐ€ ๋”ํ•ด์ง„ ํด๋ฆญ ๋™์ž‘์„ ํ‘œํ˜„ํ•  ๋•Œ ์“ด๋‹ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๊ธธ๊ฒŒ ๋ˆ„๋ฅธ๋‹ค๊ฑฐ๋‚˜ ๋‘๋ฒˆ ํƒญํ•˜๋Š” ๊ทธ๋Ÿฐ ๋™์ž‘! ๐Ÿ˜€

 

 

 

โ—พ Code

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // web ํ™”๋ฉด๊ตฌ์„ฑ์„ ์œ„ํ•ด ๋„์™€์ฃผ๋Š” ๋„ํ™”์ง€๊ฐ™์€ ์š”์†Œ ์ด๊ฑฐ ํ•„์ˆ˜์ž„
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('MENU'),
        centerTitle: true,
        backgroundColor: Colors.amber[700],
        elevation: 0.0,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('shopping cart button is clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            //iconbutton action
            onPressed: () {
              print('search button is clicked');
            },
          ),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/moon.png'),
                backgroundColor: Colors.white,
              ),
              otherAccountsPictures: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage('assets/redux.png'),
                  backgroundColor: Colors.white,
                ),
              ],
              accountName: Text('Moon'),
              accountEmail: Text('moon@gmail.com'),
              onDetailsPressed: () {
                print('open drawer');
              },
              decoration: BoxDecoration(
                  color: Colors.red[200],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(30.0),
                    bottomRight: Radius.circular(30.0),
                  )),
            ),
            ListTile(
              leading: Icon(Icons.home, color: Colors.grey[850]),
              title: Text("Home"),
              //gesture
              onTap: () {
                print('Home is clicked');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.settings, color: Colors.grey[850]),
              title: Text("Setting"),
              //gesture
              onTap: () {
                print('Setting is clicked');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.question_answer, color: Colors.grey[850]),
              title: Text("Q&A"),
              //gesture
              onTap: () {
                print('Q&A is clicked');
              },
              trailing: Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

โ—พ leading ์ด ์™ผ์ชฝ ๋ฐฐ์น˜๋ฅผ ์œ„ํ•œ ๊ฒƒ์ด๋ผ๋ฉด trailing์€ ์˜ค๋ฅธ์ชฝ ๋ฐฐ์น˜๋ฅผ ์œ„ํ•œ ๊ฒƒ์ด๋‹ค

 

 

 

 

 

728x90

'๊ฐœ๋ฐœ > Flutter' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Flutter] ์ƒˆ๋กœ์šด ํ™”๋ฉด์œผ๋กœ ์ด๋™ํ•˜๊ณ , ๋˜๋Œ์•„๊ฐ€๊ธฐ - ํŽ˜์ด์ง€ ์ด๋™  (0) 2022.05.16
[Flutter] ListView.builder๋กœ ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ถ„ ๋งŒ๋“ค๊ธฐ  (0) 2022.04.17
[Flutter/ํ”Œ๋Ÿฌํ„ฐ] BuildContext ๋ž€?  (0) 2022.04.06
[ํ”Œ๋Ÿฌํ„ฐ] app bar์— ๋ฉ”๋‰ด ์•„์ด์ฝ˜ ๋„ฃ๊ธฐ  (0) 2022.04.05
Flutter์˜ Widget์ด๋ž€?  (0) 2022.04.02
  1. โ—พ ์™„์„ฑ๋ชจ์Šต
  2. โ—พ ๊ธฐ๋ณธ ๊ตฌ์„ฑ
  3. โ—พ Code
'๊ฐœ๋ฐœ/Flutter' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Flutter] ListView.builder๋กœ ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ถ„ ๋งŒ๋“ค๊ธฐ
  • [Flutter/ํ”Œ๋Ÿฌํ„ฐ] BuildContext ๋ž€?
  • [ํ”Œ๋Ÿฌํ„ฐ] app bar์— ๋ฉ”๋‰ด ์•„์ด์ฝ˜ ๋„ฃ๊ธฐ
  • Flutter์˜ Widget์ด๋ž€?
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Frontend Developer
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
Ming devlog
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ

๊ณต์ง€์‚ฌํ•ญ

  • About Ming ๐Ÿฐ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (261)
    • ๊ฐœ๋ฐœ (255)
      • ๐Ÿ“ TIL (58)
      • โŒ ์˜ค๋ฅ˜ ๋…ธํŠธ (23)
      • React (23)
      • Next.js (11)
      • React-Native (6)
      • JavaScript (10)
      • Flutter (19)
      • Database (1)
      • ๐Ÿ’ฌ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ (21)
      • ๐Ÿ“š English (9)
      • Etc... (25)
      • โ›ต ํ•ญํ•ด99 (49)
    • ๐Ÿ’ป Dev (6)
      • ๐Ÿ“ TIL (4)
      • ๐Ÿ’ฌ Algorithm (1)
      • Etc... (1)

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ํ”Œ๋Ÿฌํ„ฐ
  • react-native
  • ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
  • ์ฝ”ํ…Œ๊ณต๋ถ€
  • nextjs
  • ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ
  • github
  • flutter
  • Firebase
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ์ฝ”ํ…Œ
  • ํ•ญํ•ด99
  • react
  • ์ฝ”๋”ฉ๊ณต๋ถ€
  • ๋ถ€ํŠธ์บ ํ”„
  • TIL
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ์ด์ฝ”๋…ธ๋ฏธ์ŠคํŠธ
  • ๋ฆฌ์•กํŠธ
  • ์ฝ”๋”ฉํ…Œ์ŠคํŠธ
  • Git
  • ๊ฐœ๋ฐœ์ž์ผ๊ธฐ
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • todaywhatidid
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
  • ๊ฐœ๋ฐœ์žํšŒ๊ณ 
  • ReactNative
  • leetcode
  • twid
  • ์˜์–ด๊ณต๋ถ€

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.1
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
[Flutter/ํ”Œ๋Ÿฌํ„ฐ] Drawer menu ๋งŒ๋“ค๊ธฐ!
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.