[2021 모각코] 4회차 (2021.01.13.)

학습 목표

: Flutter에서 사용할 Dart 언어를 추가 학습하고 codelab을 따라 앱의 화면을 구성해본다.

 

학습 내용

 

https://codelabs.developers.google.com/codelabs/mdc-101-flutter#0

MDC-101 Flutter: Material Components (MDC) Basics (Flutter)  |  Google Codelabs

https://codelabs.developers.google.com/codelabs/mdc-102-flutter#0

MDC-102 Flutter: Material Structure and Layout (Flutter)  |  Google Codelabs

 

차례대로 mdc-101, mdc-102를 완료하고 에뮬레이터에서 코드를 실행시킨 모습

 

import 'package:flutter/material.dart';

import 'app.dart';

void main() => runApp(const ShrineApp());

main.dart에서 main함수를 통해 app.dart에 정의되어있는 ShrineApp()을 실행시킴

 

import 'package:flutter/material.dart';

import 'home.dart';
import 'login.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shrine',
      home: const HomePage(),
      initialRoute: '/login',
      onGenerateRoute: _getRoute,
    );
  }

  Route<dynamic>? _getRoute(RouteSettings settings) {
    if (settings.name != '/login') {
      return null;
    }

    return MaterialPageRoute<void>(
      settings: settings,
      builder: (BuildContext context) => const LoginPage(),
      fullscreenDialog: true,
    );
  }
}

app.dart에서 initialRoute를 /login으로 지정해줌으로써 mdc-101에서 구성한 로그인화면을 먼저 보여주게 됨

 

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            TextField(
              controller: _usernameController,
              decoration: const InputDecoration(
                filled: true,
                labelText: 'Username',
              ),
            ),
            const SizedBox(height: 12.0),
            TextField(
              controller: _passwordController,
              decoration: const InputDecoration(
                filled: true,
                labelText: 'Password',
              ),
              obscureText: true,
            ),
            ButtonBar(
              children: <Widget>[
                TextButton(
                  child: const Text('CANCEL'),
                  onPressed: () {
                    _usernameController.clear();
                    _passwordController.clear();
                  },
                ),
                ElevatedButton(
                  child: const Text('NEXT'),
                  onPressed: () {
                    _usernameController.clear();
                    _passwordController.clear();
                    Navigator.pop(context);
                  },
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

login.dart에서 username, password 입력칸을 TextEditingController와 TextField를 통해 만들어주고, Scaffold를 통해 상단바, 버튼, 입력칸 등의 위치나 색상 등을 지정함. ButtonBar에서 CANCEL 버튼은 클릭되었을 경우 입력칸의 내용을 모두 지우는 기능을 하고, NEXT 버튼은 클릭되었을 경우 입력칸의 내용을 모두 지움과 동시에 mdc-102에서 구성한 화면을 Navigator.pop(context)를 통해 띄워주는 기능을 함

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: 'menu',
          ),
          onPressed: () {
            print('Menu button');
          },
        ),
        title: const Text('SHRINE'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.search,
              semanticLabel: 'search',
            ),
            onPressed: () {
              print('Search button');
            },
          ),
          IconButton(
            icon: const Icon(
              Icons.tune,
              semanticLabel: 'filter',
            ),
            onPressed: () {
              print('Filter button');
            },
          ),
        ],
      ),
      body: GridView.count(
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16.0),
        childAspectRatio: 8.0 / 9.0,
        children: <Widget>[
          Card(
            clipBehavior: Clip.antiAlias,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 18.0 / 11.0,
                  child: Image.asset('assets/diamond.png'),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text('Title'),
                      const SizedBox(height: 8.0),
                      Text('Secondary Text'),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
      resizeToAvoidBottomInset: false,
    );
  }
}

home.dart에서 Scaffold를 통해 상단바, 버튼, 입력칸 등의 위치나 색상 등을 지정함. 상단바인 appBar에서는 IconButton을 통해 햄버거바, 검색아이콘 등을 추가했고, 아래에는 GridView를 통해 내용을 그리드 형식으로 보이도록 함

 

학습후기

: 이전에는 codelab을 모르고 있다가 이번에 처음 사용해 보았는데, 설명도 자세히 잘 되어있었고 위에 앞으로 얼마나 남았는지에 대한 예상시간이 표시되어있어서 꽤나 체계적으로 학습할 수 있었다. 이번 동계 모각코에서는 새롭게 도전해보는 것들이 많아서 자신감이 조금씩 붙는 것 같은 느낌도 든다.