Drawer

 

 

 

flutter.dev/docs/cookbook/design/drawer

 

[기본소스]

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'drawer Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("aaa")
      ),

      drawer: Drawer(
        //리스트뷰의 패딩을 지워주는게 중요..???
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text("drawerHeader"),
              decoration: BoxDecoration(color: Colors.blue),
            ),
            ListTile(
              title:Text("item 1"),
              onTap:(){}
            ),
            ListTile(
              title:Text('Item 2'),
              onTap: (){},
            )
          ],
        )
      )
    );
  }
}


class I

 

 

[2]

drawer로 화면이동하기...

각 페이지마다 scafold부터 만들어줘야 합니다. drawer를 공통으로 쓰기 위해 따로 정의 했습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'drawer Demo',
      routes:{
        "/home" : (context)=>MyHomePage(),
        '/item1' : (context)=>Item1Page(),
        '/item2' : (context)=>Item2Page()
      },
      //initialRoute : '/',
      home: MyHomePage(),
    );
  }
}

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      //리스트뷰의 패딩을 지워주는게 중요..???
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text("drawerHeader"),
              decoration: BoxDecoration(color: Colors.blue),
            ),
            ListTile(
                title:Text("Home"),
                onTap:(){
                  Navigator.pushReplacementNamed(context, "/home");
                }
            ),
            ListTile(
                title:Text("Item 1"),
                onTap:(){
                  Navigator.pushReplacementNamed(context, "/item1");
                }
            ),
            ListTile(
              title:Text('Item 2'),
              onTap: (){
                Navigator.pushReplacementNamed(context, "/item2");
              },
            )
          ],
        )
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("aaa")
      ),

      drawer:AppDrawer(),
      body: Text("MyHomePage")
    );
  }
}


class Item1Page extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("aaa")
        ),

        drawer:AppDrawer(),
        body: Text("Item1Page")
    );
  }
}


class Item2Page extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("aaa")
        ),

        drawer:AppDrawer(),
        body: Text("Item2Page")
    );
  }
}

 

 

[3]

drawer로 body만 교체.

Navigator.pop(context)로 Drawer를 닫아주어야합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'drawer Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePage createState()=>_MyHomePage();
}

class _MyHomePage extends State<MyHomePage>{

  int _bodyIndex = 0;

  Widget _getBodyItem(){
    switch(_bodyIndex){
      case 0: return Body0();
      case 1: return Body1();
      case 2: return Body2();
      default: return Body0();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title:Text("aaa")
        ),

        drawer:Drawer(
          //리스트뷰의 패딩을 지워주는게 중요..???
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                DrawerHeader(
                  child: Text("drawerHeader"),
                  decoration: BoxDecoration(color: Colors.blue),
                ),
                ListTile(
                    title:Text("Home"),
                    onTap:(){
                      setState(() {
                        _bodyIndex = 0;
                      });
                      Navigator.pop(context);
                    }
                ),
                ListTile(
                    title:Text("Item 1"),
                    onTap:(){
                      setState(() {
                        _bodyIndex =1;
                      });
                      Navigator.pop(context);
                    }
                ),
                ListTile(
                  title:Text('Item 2'),
                  onTap: (){
                    setState(() {
                      _bodyIndex = 2;
                    });
                    Navigator.pop(context);
                  },
                )
              ],
            )
        ),
        body: _getBodyItem()
    );
  }
}

class Body0 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text("homepage");
  }
}

class Body1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text("Item1Page");
  }
}

class Body2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text("Item2Page");
  }
}