MDC-101 Flutter: 머티리얼 구성요소(MDC) 기본사항(Flutter)

Flutter용 머티리얼 디자인 및 머티리얼 구성요소란 무엇인가요?

머티리얼 디자인은 대담하고 아름다운 디지털 제품을 빌드하는 시스템입니다. 일련의 일관된 원칙과 구성요소 아래 스타일과 브랜딩, 상호작용, 모션을 통합하여 제품팀은 가능한 최고의 디자인을 실현할 수 있습니다.

Flutter용 머티리얼 구성요소(MDC-Flutter)는 앱과 플랫폼에서 일관된 사용자 환경을 만드는 구성요소 라이브러리를 사용하여 디자인과 엔지니어링을 통합합니다. 머티리얼 디자인 시스템이 발전함에 따라 이러한 구성요소는 Google의 프런트엔드 개발 표준을 준수하면서 일관된 픽셀 완벽 구현을 보장하도록 업데이트됩니다. MDC는 Android, iOS, 웹에서도 사용할 수 있습니다.

이 Codelab에서는 여러 MDC Flutter 구성요소를 사용하여 로그인 페이지를 빌드합니다.

빌드할 항목

이 Codelab은 Shrine 앱(의류와 가정용품을 판매하는 전자상거래 앱)을 빌드하는 방법을 설명하는 Codelab 네 개 중 첫 번째 Codelab입니다. MDC-Flutter를 사용하여 브랜드나 스타일을 반영하도록 구성요소를 맞춤설정하는 방법을 보여줍니다.

이 Codelab에서는 다음이 포함된 Shrine의 로그인 페이지를 빌드합니다.

  • Shrine의 로고 이미지
  • 앱 이름(Shrine)
  • 텍스트 입력란 두 개. 하나는 사용자 이름 입력용, 하나는 비밀번호 입력용
  • 버튼 2개

Android

iOS

이 Codelab의 MDC 구성요소

  • 텍스트 입력란
  • 버튼
  • 물결 효과(터치 이벤트의 시각적 피드백 형식)

Flutter 개발 경험 수준을 평가해주세요.

초급 중급 고급

시작하기 전에

Flutter를 사용하여 모바일 앱을 개발하려면 다음을 실행해야 합니다.

  1. Flutter SDK를 다운로드하고 설치합니다.
  2. Flutter SDK를 사용하여 PATH를 업데이트합니다.
  3. Flutter와 Dart 플러그인이 포함된 Android 스튜디오나 선호하는 편집기를 설치합니다.
  4. Android Emulator, iOS 시뮬레이터(Xcode가 포함된 Mac 필요)를 설치하거나 실제 기기를 사용합니다.

Flutter 설치에 관한 자세한 내용은 시작하기: 설치를 참고하세요. 편집기를 설정하려면 시작하기: 편집기 설정을 참고하세요. Android Emulator를 설치할 때 최신 시스템 이미지가 있는 Pixel 3 휴대전화와 같은 기본 옵션을 자유롭게 사용하세요. VM 가속을 사용 설정하는 것이 좋지만 필수는 아닙니다. 위 네 단계를 완료한 후 Codelab으로 돌아가면 됩니다. 이 Codelab을 완료하려면 플랫폼(Android나 iOS) 하나에만 Flutter를 설치하면 됩니다.

Flutter SDK가 올바른 상태인지 확인

이 Codelab을 진행하기 전에 SDK가 올바른 상태인지 확인하세요. 이전에 Flutter SDK를 설치한 경우 flutter upgrade를 사용하여 SDK가 최신 상태인지 확인합니다.

 flutter upgrade

flutter upgrade를 실행하면 flutter doctor.가 자동으로 실행됩니다. 최신 Flutter가 설치되어 있어 업그레이드가 필요하지 않으면 flutter doctor를 수동으로 실행합니다. 그러면 설정 완료를 위해 설치해야 하는 종속 항목이 있는지 보고됩니다. 관련 없는 체크표시(예: iOS용으로 개발하지 않으려는 경우 Xcode)는 무시해도 됩니다.

 flutter doctor

자주 묻는 질문(FAQ)

시작 프로젝트 다운로드

시작 프로젝트는 material-components-flutter-codelabs-101-starter/mdc_100_series 디렉터리에 있습니다.

...또는 GitHub에서 클론

이 Codelab을 GitHub에서 클론하려면 다음 명령어를 실행합니다.

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

프로젝트 설정

다음 안내에서는 개발자가 Android 스튜디오(IntelliJ)를 사용한다고 가정합니다.

프로젝트 열기

1. Android 스튜디오를 엽니다.

2. 시작 화면이 표시되면 Open an existing Android Studio project를 클릭합니다.

3. material-components-flutter-codelabs/mdc_100_series 디렉터리로 이동하여 Open을 클릭합니다. 프로젝트가 열립니다. 프로젝트를 한 번 빌드할 때까지는 Dart Analysis에 표시되는 오류를 무시해도 됩니다.

4. 메시지가 표시되면 다음 단계를 따릅니다.

  • 플랫폼 및 플러그인 업데이트나 FlutterRunConfigurationType을 설치합니다.
  • Dart 또는 Flutter SDK가 구성되지 않은 경우 Flutter 플러그인용 Flutter SDK 경로를 설정합니다.
  • Android 프레임워크를 구성합니다.
  • 'Get dependencies'나 'Run ‘flutter packages get''을 클릭합니다.

그런 다음 Android 스튜디오를 다시 시작합니다.

시작 앱 실행

다음 안내에서는 Android Emulator 또는 기기에서 테스트한다고 가정하지만 Xcode를 설치한 경우 iOS 시뮬레이터 또는 기기에서 테스트해도 됩니다.

1. 기기나 에뮬레이터를 선택합니다. Android Emulator가 아직 실행되지 않는다면 Tools -> Android -> AVD Manager를 선택하여 가상 기기를 만들고 에뮬레이터를 시작합니다. AVD가 이미 있는 경우 다음 단계와 같이 Android 스튜디오의 기기 선택기에서 바로 에뮬레이터를 시작할 수 있습니다. iOS 시뮬레이터의 경우 아직 실행되고 있지 않다면 Flutter Device Selection -> Open iOS Simulator를 선택하여 개발 머신에서 시뮬레이터를 실행합니다.

2. Flutter 앱을 시작합니다.

  • 편집기 화면 상단에서 Flutter Device Selection 드롭다운 메뉴를 찾아 기기(예: <version>용으로 빌드된 iPhone SE 또는 Android SDK)를 선택합니다.
  • 재생 아이콘()을 누릅니다.

완료되었습니다. Shrine의 로그인 페이지 시작 코드가 시뮬레이터에서 실행됩니다. Shrine 로고와 그 바로 아래에 'Shrine' 이름이 표시됩니다.

Android

iOS

코드를 살펴보겠습니다

login.dart위젯

login.dart를 엽니다. 다음이 포함되어 있어야 합니다.

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO: Wrap Username with AccentColorOverride (103)
            // TODO: Remove filled: true values (103)
            // TODO: Wrap Password with AccentColorOverride (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

// TODO: Add AccentColorOverride (103)

import 문과 새 클래스 두 개가 포함되어 있습니다.

  • import 문은 머티리얼 구성요소를 이 파일로 가져옵니다.
  • LoginPage 클래스는 시뮬레이터에 표시되는 전체 페이지를 나타냅니다.
  • _LoginPageState 클래스의 build() 함수는 UI의 모든 위젯이 만들어지는 방식을 제어합니다.

우선 사용자가 사용자 이름과 비밀번호를 입력하는 텍스트 입력란 두 개를 로그인 페이지에 추가합니다. 플로팅 라벨을 표시하고 터치 물결 효과를 활성화하는 TextField 위젯을 사용합니다.

이 페이지는 하위 요소를 스크롤 가능한 열에 정렬하는 ListView로 주로 구성됩니다. 텍스트 입력란을 하단에 배치해보겠습니다.

TextField 위젯 추가

SizedBox(height: 120.0) 뒤에 새 텍스트 입력란 두 개와 공백을 추가합니다.

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

각 텍스트 입력란에는 InputDecoration 위젯을 사용하는 decoration: 입력란이 있습니다. filled: 입력란은 사용자가 텍스트 입력란의 탭이나 터치 영역을 쉽게 알아볼 수 있도록 텍스트 입력란의 배경이 가볍게 채워져 있음을 의미합니다. 두 번째 텍스트 입력란의 obscureText: true 값은 사용자가 입력하는 입력값을 비밀번호에 적합한 글머리 기호로 자동으로 바꿉니다.

핫 리로드를 실행하는 프로젝트를 저장합니다(키 입력: command + s 사용).

이제 사용자 이름과 비밀번호에 사용할 텍스트 입력란 두 개가 포함된 페이지가 표시됩니다. 플로팅 라벨 애니메이션을 확인해보세요.

Android

iOS

이제 '취소'와 '다음' 버튼 두 개를 로그인 페이지에 추가합니다. 두 가지 MDC 버튼 위젯인 FlatButton(머티리얼 가이드라인에서는 '텍스트 버튼'이라고 함)과 RaisedButton('포함된 버튼'이라고 함)을 사용합니다.

ButtonBar 추가

텍스트 입력란 뒤 ListView의 하위 요소에 ButtonBar를 추가합니다.

// TODO: Add button bar (101)
ButtonBar(
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

ButtonBar는 행으로 하위 요소를 정렬합니다.

버튼 추가

이제 ButtonBar의 children 목록에 버튼 두 개를 추가합니다.

    // TODO: Add buttons (101)
    FlatButton(
      child: Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    RaisedButton(
      child: Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

프로젝트를 저장합니다. 마지막 텍스트 입력란 아래에 버튼 두 개가 표시됩니다.

Android

iOS

ButtonBar는 레이아웃 작업을 처리합니다. 버튼을 가로로 배치하므로 현재 ButtonTheme의 패딩에 따라 버튼이 나란히 표시됩니다. 자세한 내용은 MDC-103 Codelab을 참고하세요.

버튼을 터치하면 다른 작업이 실행되지 않고 잉크 물결 효과 애니메이션이 시작됩니다. 취소 버튼으로 텍스트 입력란을 지우고 다음 버튼으로 화면을 닫도록 익명 onPressed: 함수에 기능을 추가해보겠습니다.

TextEditingControllers 추가

텍스트 입력란의 값을 지울 수 있도록 TextEditingControllers를 추가하여 텍스트를 제어합니다.

_LoginPageState 클래스의 선언 바로 아래에 컨트롤러를 final 변수로 추가합니다.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

첫 번째 텍스트 입력란의 controller: 입력란에서 _usernameController를 설정합니다.

// [Name]
TextField(
  controller: _usernameController,

두 번째 텍스트 입력란의 controller: 입력란에서 이제 _passwordController를 설정합니다.

// [Password]
TextField(
  controller: _passwordController,

onPressed 수정

FlatButton의 onPressed: 함수에서 각 컨트롤러를 지우는 명령어를 추가합니다.

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

프로젝트를 저장합니다. 이제 텍스트 입력란에 무언가를 입력할 때 취소를 누르면 각 입력란이 다시 지워집니다.

이 로그인 양식은 잘 작동합니다. 사용자를 Shrine 앱의 나머지 부분으로 안내해보겠습니다.

이 뷰를 닫으려면 탐색 스택에서 이 페이지(Flutter에서는 경로라고 함)를 (또는 삭제)합니다.

RaisedButton의 onPressed: 함수에서 탐색기의 최근 경로를 표시합니다.

        // TODO: Show the next page (101)
        Navigator.pop(context);

마지막으로 home.dart를 열고 Scaffold에서 resizeToAvoidBottomInsetfalse로 설정합니다.

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

이렇게 하면 키보드의 모양으로 홈페이지나 홈페이지 위젯의 크기가 변경되지 않습니다.

이제 완료됐습니다. 프로젝트를 저장합니다. '다음'을 클릭해보세요.

축하합니다.

Android

iOS

이 화면은 MDC-102에서 작업할 다음 Codelab의 시작점입니다.

텍스트 입력란과 버튼은 추가했지만 레이아웃 코드는 거의 고려하지 않았습니다. Flutter용 머티리얼 구성요소는 다양한 스타일로 제공되며 화면에 손쉽게 배치할 수 있습니다.

다음 단계

텍스트 입력란과 버튼은 머티리얼 시스템의 두 가지 핵심 구성요소이지만 이 외에도 더 많은 요소가 있습니다. Flutter 머티리얼 구성요소 라이브러리에서 나머지 위젯을 살펴볼 수도 있습니다.

또는 MDC-102: 머티리얼 디자인 구조 및 레이아웃으로 이동하여 Flutter용 MDC-102에서 다루는 구성요소를 알아보세요.

다음 Codelab

적절한 시간과 노력을 들여 이 Codelab을 완료할 수 있었습니다.

매우 동의함 동의함 보통 동의하지 않음 전혀 동의하지 않음

앞으로 머티리얼 구성요소를 계속 사용하고 싶습니다.

매우 동의함 동의함 보통 동의하지 않음 전혀 동의하지 않음