[Flutter] 화면 구현 연습하기 - Appbar 활용

 

프로필 만들기 - Appbar 활용

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyPage(),
    );
  }
}

 

그리고 홈 화면을 같이 구현해줍니다.

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
      ),
    );
  }
}

 

Hot reload를 했는데 색이 적용되지 않았습니다.

 

이유는 Flutter 버전 때문인데요, 다음과 같이 useMaterials3: false를 추가해줍니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Appbar',
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.blue,
      ),
      home: MyPage(),
    );
  }
}

 

이제 아래와 같은 화면이 나옵니다.

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('메뉴 버튼을 누릅니다.');
          },
        ),
      ),
    );
  }
}

 

 

 

화면에 메뉴 추가하기

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
        centerTitle: true,
        elevation: 0.0, //입체감 빼버리기
        leading: IconButton(
          icon: Icon(Icons.menu),
        ),
      ),
    );
  }
}

 

이렇게 위와 같이 작성하면 에러가 나타납니다.

이유는 IconButton에는 클릭했을 때 반환값을 갖는 onPressed를 함께 넣어줘야 하기 때문입니다.

 

 

- onPressed 추가

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {}, // 추가
        ),
      ),
    );
  }
}

 

화면에 햄버거 메뉴 버튼이 생겼습니다.

햄버거 버튼을 클릭하면 화면에 로그가 생기도록 확인하려면 아래와 같이 print 문을 추가해주면 됩니다.

 

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('메뉴 버튼을 누릅니다.'); // 추가
          },
        ),
      ),
    );
  }
}

 

햄버거 버튼을 클릭할 때마다 아래와 같은 로그가 콘솔에 출력됩니다.

 

 

 

Drawer 추가하기

위에서 했던 코드 중 leading 부분을 지워줍니다.

그리고 아래로 내려와 actions 리스트에 아이콘 버튼을 추가하고,

아래와 같이 Drawer 위젯을 추가합니다.

 

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hachiware'),
        centerTitle: true,
        elevation: 0.0,
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('쇼핑카트 버튼을 누릅니다.');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('검색 버튼을 누릅니다.');
            },
          ),
        ],
      ),
      drawer: Drawer(       //추가
        child: ListView(),
      ),
    );
  }
}

 

코드를 실행하면 아래와 같이 화면이 생성됩니다.

 

이 때 메뉴 버튼을 누르면 아래처럼 화면이 나타납니다.

 

 

프로필 이미지랑 이름, 이메일 추가하고 마무리

assets 디렉토리를 생성한 후 원하는 프로필 사진을 저장합니다.

이미지 파일을 assets 디렉토리에 저장한 후에는 rebuild 해줍니다.

그렇지 않으면 이미지를 찾을 수 없다는 오류가 발생합니다.

 

그리고 yaml 파일에서 assets 경로를 활성화해줍니다. (들여쓰기에 주의해줍니다.)

 

command+s 를 누른후 dart 파일로 돌아와 get dependencies를 눌러줍니다.

exit code 0 이 나오면 정상적으로 된 것입니다.

 

다시 프로젝트 dart 파일로 돌아와 다음과 같이 코드를 추가해줍니다.

drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/hachiware.webp'),
                backgroundColor: Colors.blue[100],
              ),
            ),
          ],
        ),

 

이렇게만 작성하면 오류가 발생할거에요.

UserAccountsDrawerHeader를 생성하면 accountName과 accountEmail은 필수값이기 때문입니다.

command를 누르고 해당 위젯을 클릭하여 상세정보에 들어가보면 더 자세하게 알 수 있습니다.

 

이메일과 이름을 추가해줍니다.

 

drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/hachiware.webp'),
                backgroundColor: Colors.blue[100],
              ),
              accountEmail: Text('hachiware@chiikawa.com'),
              accountName: Text('Hachiware'),
            ),
          ],
        ),
      ),

 

다음과 같이 프로필 이미지와 이름, 이메일 주소가 보입니다.

 

 

다음에는 이어서 프로필 아래에 게시판 탭을 구현해보겠습니다.

감사합니다.