flutter 3일차 drawer

오늘은 앱을 쓰다보면 왼족에서 나오는 마이페이지 같은 것을 만들어 보겠습니다.

이런식으로 나오게 됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              accountName: Text('hellow'),
              accountEmail: Text('fkdskjflajsd@gmail.com'),
              onDetailsPressed: () {
                print('detail');
              },
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/img.jpg'),
              ),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.red.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 5),
                  )
                ],
              ),
            ),
            ListTile(
              leading: Icon(
                Icons.send,
                color: Colors.red,
              ),
              title: Text('리스트'),
              onTap: () {
                print('리스트');
              },
              trailing: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  print('add');
                },
              ),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text('hellow'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {},
            child: Text(
              'elevated',
              style: TextStyle(color: Colors.black),
            ),
            style: ElevatedButton.styleFrom(
              primary: Colors.yellow,
              textStyle: TextStyle(
                backgroundColor: Colors.blue,
                fontSize: 20.0,
              ),
            ),
          ),
          TextButton(onPressed: () {}, child: Text('TextButton')),
          OutlinedButton(onPressed: () {}, child: Text('OutlinedButton'))
        ],
      ),
    );
  }
}

이부분이 전체 코드입니다.

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(
        accountName: Text('hellow'),
        accountEmail: Text('fkdskjflajsd@gmail.com'),
        onDetailsPressed: () {
          print('detail');
        },
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/img.jpg'),
        ),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(30),
            bottomLeft: Radius.circular(30),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.red.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 5),
            )
          ],
        ),
      ),
      ListTile(
        leading: Icon(
          Icons.send,
          color: Colors.red,
        ),
        title: Text('리스트'),
        onTap: () {
          print('리스트');
        },
        trailing: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            print('add');
          },
        ),
      ),
    ],
  ),
),

그리고 이부분이 어제꺼에서 추가 된 내용입니다

drawer: Drawer(),

이거 까지만 작성하면

왼쪽에 햄버거 모양 버튼이 생기고  저걸 클릭하면

이렇게 나오게 됩니다.

drawer: Drawer(
  child: Text('hi'),
)

이렇게 child에 넣으면 위쪽에 hi 가 나온게 보일것입니다 이렇게 이용해서 drawer을 작성해보겠습니다.

 Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(accountName: Text('hellow'), accountEmail: Text('ㄹㅇㄴㄹ@gmail.com'))
    ],
  ),
),

 

이렇게 ListView안에 패딩을 zero로 주고 UserAcoutnDraweHeader를 호출하면 젤위에 저런식으로 빨간 박스가 생기게 됩니다. 그리고 accountName에 이름 accountEmail에 이메일을 넣어주면 저렇게 두줄로 들어가게 됩니다 물론 

글자를 안넣어도 잘들어갑니다.

이런식으로 위젯은 다들어가는거 같아요

 

pubsec.yaml로 가서

이런식으로 assets:밑에 - 경로 이렇게 넣어주면 그 이미지를 꺼내서 출력할수 있습니다. 여기서는 뛰워쓰기가 예민하므로 꼭 맞춰서작성해주세요  저는 assets파일 만들고 그아네 img.jpg로 이미지 넣어줬습니다. jpg png 상관없습니다.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader
        (accountName: Text('hellow'),
          accountEmail: Icon(Icons.send),
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/img.jpg'),
        ),)
    ],
  ),
),

이렇게  backgroundImage에서 AssetImage불러오고 괄호안에 '파일경로' 하면 저런식으로 이미지가 나오게 됩니다.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader
        (accountName: Text('hellow'),
          accountEmail: Icon(Icons.send),
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/img.jpg'),
        ),
        onDetailsPressed: () {
          print('detail');
        },
      ),
    ],
  ),
),

onDetailPressed를 추가하고 함수를 넣어주면 오른쪽 하단에 하얀 세모가 생기는데 저걸 누르면 해당 함수가 실행됩니다.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(
        accountName: Text('hellow'),
        accountEmail: Icon(Icons.send),
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/img.jpg'),
        ),
        onDetailsPressed: () {
          print('detail');
        },
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(30),
            bottomLeft: Radius.circular(30),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.red.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 5),
            )
          ],
        ),
      ),
    ],
  ),
),

decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(30),
            bottomLeft: Radius.circular(30),
          ),

여기서 빨간색이어떤 박스 관한 설정이다 색깔을 color로 설정해주고 borderRadius로 밑에부분 둥글기를 설정 해주었습니다.

boxShadow: [
            BoxShadow(
              color: Colors.red.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 5),
            )
          ],

boxShadow로 밑에 그림자 같이 생기는걸 설정합니다 color로 그림자 같은거 색깔 정하고 Opacity로 얼마나 투명하게 하는지정하게 됩니다.1에가까울수록 색이 진하게 나옵니다.

spreadRadius 로 크기가 얼마 만큼 하게 할건지 정하고 blurRadius로 그게 얼마나 번지는 느낌을 줄지 정하게 됩니다.

offset은 얼마나떨어지게 할건지 인데 아까 boxDecoration은  빨간 박스를 수정한게 아니고 그위에 BoxDecoration을 덮은 느낌이므로 위쪽으로 조금떨어지게  하는건 문제가 없지만 왼쪽을 떨어지게하면 하얀화면이  바로 보이게 됩니다.

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      UserAccountsDrawerHeader(
        accountName: Text('hellow'),
        accountEmail: Icon(Icons.send),
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/img.jpg'),
        ),
        onDetailsPressed: () {
          print('detail');
        },
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(30),
            bottomLeft: Radius.circular(30),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.red.withOpacity(0.5),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 5),
            )
          ],
        ),
      ),
      ListTile(
        leading: Icon(
          Icons.send,
          color: Colors.red,
        ),
        title: Text('리스트'),
        onTap: () {
          print('리스트');
        },
        trailing: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            print('add');
          },
        ),
      ),
    ],
  ),
),

 

ListView 안에 children으로 ListTile을 넣어주면 이런식으로 세로로 나오게 됩니다.

leading은 왼쪽에 배치할것을 정하게 하는거고 title은 그옆에 나올 제목을 설정하게 됩니다.

그리고 trailling은 젤오른쪽에 오는것을 정하게 됩니다.

ontap은 해당요소를 클랙했을때 실행할 함수를 나타나게 됩니다

 

이렇게 drawer를 완성해 보았습니다.