9.Flutter2.0 (플러터 2.0) 왼쪽 리스트 뷰로 메뉴 만들기
안녕하세요. 여러분
조이코딩연구소 장샘 입니다.
오늘은 앱 페이지에서 왼쪽 상단 메뉴를 눌렀을 때 내 개인 정보와 항목들이 나오는걸 만들어 볼거에요.
왼쪽 메뉴를 누르면 아래 사진처럼 나오는걸 만들거에요.
 |
 |
자 이제 코딩을 시작해보죠
이 부분은 더 이상 설명이 필요 없겠죠?
실제 리스트 뷰에서 사용자 계정 쪽 이미지와 글씨 등 효과를 주는걸 쉽게 주석 설명을 달아 놨습니다.
실제 코드를 아래에 넣어 드립니다.
import 'package:flutter/material.dart';
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(// App Bar를 만들자
title: Text('Joy Coidng Lab Menu'),// 앱 바에 글씨를 써준다.
centerTitle: true,// 가운데로 글씨를 정렬하자.
elevation: 0.0,//올록이 효과를 없앤다.
actions: [//앱 바에 아이콘 들을 배치하자.
IconButton(// 아이콘 버튼 형태를 만들자.
icon: Icon(Icons.shopping_cart),//아이콘 쇼핑 카트 아이콘을 넣어보자.
onPressed: () {// 버튼 클릭했을때의 번쩍효과!!
print('menu button is clicked');
},
), //리딩 속성을 불러 옵니다.
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('menu button is clicked');
},
), //리딩 속성을 불러 옵니다.
],
),
drawer: Drawer(//왼족 햄버거 모양의 메뉴를 만들어보자.
child: ListView(//클릭했을때 리스트 메뉴를 만들자.
padding: EdgeInsets.zero,//빈공간을 만들지 말자.
children: [
UserAccountsDrawerHeader(//메뉴 중에 사용자 헤드 메세지 부분을 만들자.
currentAccountPicture: CircleAvatar(// 이미지는 동그랗게 꾸며주고.
backgroundImage: AssetImage('assets/bonobono.jpg'),//내가 이미지 삽입
backgroundColor: Colors.white,// 배경은 화이트로~
),
accountName: Text('JoyCoding'),//사용자 계정에는 이부분을 꼭 써줘야 한다.
accountEmail: Text('jhwjhw2580@gmail.com'),//사용자 계정에는 이부분을 꼭 써줘야 한다.
onDetailsPressed: () {//리스트 뷰 화면에서 화살표 모양의 오른쪽에 버튼 생성.
print('arrow is clicked');
},
decoration: BoxDecoration(//사용자 계정 이미지를 동그랗게 꾸며준다.
color: Colors.blue[200],
borderRadius: BorderRadius.only(//사각형 이미지의 아래쪽을 동그랗게 만든다.
bottomLeft: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능
bottomRight: Radius.circular(40.0),//40.0은 동그랗게 만들어 주는 상수 값이다. 변경 가능
),
),
),
],
),
),
);
}
}
자 오늘도 알차게.. 쉬지 않고 달렸습니다.
꾸준함이 여러분을 성공적인 코딩의 세계로 이끌어 줄거라 확신합니다.
저도 그렇기 때문에 하루도 빠지지 않고 작성하도록 하겠습니다.
오늘도 이만.. 2021.04.23 조이코딩연구소 장샘.