플러터 상단 메뉴 홈바 appbar

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //디버그 리본 없애기
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home:LoginPage(),
    );
  }
}

디버그 리본 없애기 코드 한 줄 추가

상단 바 테마 색 바꾸기 theme : 이후로 쭉. 

 

ㅡㅡㅡㅡ

child: Scaffold(
  appBar: AppBar(
    title: Text('타이틀'),
    centerTitle: true, // 제목 중앙으로
    elevation: 0.0, //상단 메뉴 떠있는 듯한 그림자 효과 제거
    leading: IconButton(
      onPressed: (){},
      icon: Icon(Icons.menu),
    ), // leading, 상단 왼쪽에 아이콘 배치
    actions: [
      IconButton(
        onPressed: (){},
        icon: Icon(Icons.menu),
      ), 
    ], // actions 상단 왼쪽에 햄버거 버튼 아이콘 배치
    automaticallyImplyLeading: false, // 뒤로가기 버튼 없애기
  ), // AppBar

Scaffold 의  appBar 에서 상단 메뉴의 많은 것들을 설정할 수 있다.

타이틀 텍스트

텍스트 중앙 정렬

상단 메뉴 떠있는 듯한 그림자 효과 제거

아이콘 좌우에 배치

뒤로가기 버튼 없애기

 

 

 

스케폴드 스카폴드? 스캐폴드? 의 속성 중 하나로, 상단 바에 만든 아이콘을 누르면 

좌측 우측 슬라이드 팝업 메뉴, 

드로어 Drawer 메뉴를 만들 수 있다.

return Scaffold(

  appBar: AppBar(
    title: Text('드로어'),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.menu),
      ),
    ], //actions
  ), //AppBar
  
  drawer: Drawer(
   child: ListView(
     // 드로어 내에 리스트 만들어 위젯을 childeren으로 나열
   ), // ListView
  ), //Drawer
); //Scaffold

보니까 드로어 메뉴는 actions:[ ] 이 부분이 없이 

drawer: Drawer 이부분만 있어도

상단에 아이콘을 만들어준다.

 

그리고 drawer 이부분을

endDrawer: Drawer(
  child: ListView(
    // 드로어 내에 리스트 만들어 위젯을 childeren으로 나열
  ),
),

이렇게 endDrawer로 고쳐주면 햄버거 메뉴가 우측에 생김

 

ListView 안쪽에 

children: [
  UserAccountsDrawerHeader(
    currentAccountPicture: CircleAvatar(
      backgroundImage: AssetImage('assets/image/dog.jpg'),
    ),
    accountName: Text('닉네임'),
    accountEmail: Text('abc12356@naver.com'),
    onDetailsPressed: () {},
    decoration: BoxDecoration(
      color: Colors.purple[200],
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10.0),
        bottomRight: Radius.circular(10.0),
      ),
    ),
  )
],

이런거 넣어주면 프로필 사진도 올릴 수 있고 

닉네임, 이메일도 올리고 on Pressed 시 접었다 폈다 토글도 가능하다.

 

 

SizedBox(
  height:60 ,
  child: DrawerHeader(
    decoration: BoxDecoration(
      color: Colors.white,
    ),
    child: Text('닉네임'),
  ),
),

굳이 유저 프로필 설정이 필요 없다면

UserAccountsDrawerHeader 대신 DrawerHeader 를 쓰고 

안에 속성을 위 코드와 같이 사용 가능 

 

그리고 이 드로어 해더의 높이를 조절하고 싶다면

콘테이너 Container나 SizeBox 싸이즈 박스로 감싸서 height 높이로 조절 가능

 

 

 

ListTile 사용하여 드로어 안에

바로 가기 메뉴 만들 수 있다.

 

ListView 안쪽에 위젯으로 써준다

 

onTap 탭하거나 길게 누르는 이벤트 감지할 수 있다고 한다. 

leading 좌측에 아이콘추가 

trailing 우측에 아이콘 추가

children: [
  ListTile(
    leading: Icon(Icons.home),
    iconColor: Colors.purple,
    focusColor: Colors.purple,
    title: Text('홈'),
    onTap: () {},
    trailing: Icon(Icons.navigate_next),
  ),
  ListTile(
    leading: Icon(Icons.home),
    iconColor: Colors.purple,
    focusColor: Colors.purple,
    title: Text('홈'),
    onTap: () {},
    trailing: Icon(Icons.navigate_next),
  )
],

 

 

 

 

AppBar 햄버거 메뉴 darwer 안눌르고

다른 위치에서 버튼 눌렀을 때 Drawer를 나오게 하기

 

 

1. key 선언

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

1. Scffold 안에 key 포함

Scaffold(
  key: _scaffoldKey,
)

1. 버튼에 Drawer를 나타나게 할 코드 추가

drawer를 사용하였다면 openDrawer,
endDrawer를 사용하였다면 openEndDrawer를 사용하여야 한다.

 

body: Center(
  child: TextButton(
    onPressed: () {
      _scaffoldKey.currentState.openDrawer();
    },
    child: Text('Drawer!!!'),
    style: TextButton.styleFrom(
      backgroundColor: Colors.red[300],
      elevation: 1,
      primary: Colors.white,
    ),
  ),
),