예제

유튜버 '코딩셰프'의 강좌를 보고 작성했습니다.

import 'package:flutter/material.dart'; // 플러터의 모든것이 들어있으므로 반드시 `import` 해준다.


void main() => runApp(MyApp()); //root위젯을 불러온다.

class MyApp extends StatelessWidget{ //StatlelessWidget이라는 정적 위젯을 상속받아 구현한다.
  @override
  Widget build(BuildContext context) {  // 객체를 구현한다.
    return MaterialApp( // 하위 위젯을 리턴한다.
      title: 'First App',// 앱의 이름을 설정한다.
      home: MyHomePage(), //그 하위 위젯을 불러온다.
    );
  }
}

class MyHomePage extends StatelessWidget{ // StatelessWidget이라는 정적 위젯을 상속받아 구현한다.
  @override
  Widget build(BuildContext context) { //객체를 구현한다.
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: const Text('BBANTO'),
        centerTitle: true,
        backgroundColor: Colors.amber[700],
        elevation: 0.0,
        actions: [  // 앱바 우측 위치 구현
          IconButton(
              onPressed:() {
                print("shopping cart click");
              },
              icon: Icon(Icons.shopping_cart))
        ],
      ),
      drawer: Drawer( // 앱바 좌측에 drawer 생성
        child: ListView(  //리스트뷰를 보여준다
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader( // useraccountdrawerheader을 구현한다.
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/images/p01047_img8.png'),
              ),
              accountEmail: Text('castlekong1019@gmail.com'),
              accountName: Text('BBANTO'),
              onDetailsPressed:(){
                print('arrow is clicked');
              },
              otherAccountsPictures: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage('assets/images/Untitled-1.png'),
                ),
              ],
              decoration: BoxDecoration(
                color: Colors.red[200],
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0),
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.home,
              color: Colors.grey[850]),
              title: Text('home'),
              onTap: (){
                print('Home is clicked');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.settings,
                  color: Colors.grey[850]),
              title: Text('Setting'),
              onTap: (){
                print('Home is Setting');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(Icons.question_answer,
                  color: Colors.grey[850]),
              title: Text('Q&A'),
              onTap: (){
                print('Q&A');
              },
              trailing: Icon(Icons.add),
            )
          ],
        ),
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/images/p01047_img8.png'),
                radius: 60.0,
              ),
            ),
            Divider(
              height: 60.0,
              color: Colors.grey[850],
              thickness: 0.5,
            ),
            Text('NAME',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
            ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('BBANTO',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
              fontSize: 28.0,
              fontWeight: FontWeight.bold
            ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('BBANTO POWER LEVEL',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('14.',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10.0
                ),
                Text('Using Light-saber',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                )
              ],
            ),
            SizedBox(
              height: 5.0,
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outline),
                SizedBox(
                    width: 10.0
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                )
              ],
            ),
            SizedBox(
              height: 5.0,
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outline),
                SizedBox(
                    width: 10.0
                ),
                Text('fire flames',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}