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

1. 소개

Material Design 및 Material Flutter 라이브러리란 무엇인가요?

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

Material Flutter 라이브러리에는 앱과 플랫폼 전반에 걸쳐 일관적인 사용자 환경을 만들기 위해 Material Design 구성요소 (줄여서 MDC)의 디자인을 구현하는 Flutter 위젯이 포함되어 있습니다. 머티리얼 디자인 시스템이 발전함에 따라 이러한 구성요소는 Google의 프런트엔드 개발 표준을 준수하면서 일관된 픽셀 완벽 구현을 보장하도록 업데이트됩니다.

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

빌드할 항목

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

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

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

Android	iOS

이 Codelab은 스크린샷을 제외한 Material 3으로 업데이트되었습니다. 그럼에도 동일한 정보를 전달합니다.

이 Codelab은 Shrine이라는 제품 앱을 빌드하는 방법을 안내하는 Codelab 4개 중 첫 번째입니다. 단계별로 작업을 진행해 나가므로 모든 Codelab을 순서대로 학습하는 것이 좋습니다. 관련 Codelab은 아래에서 확인할 수 있습니다. MDC-102 Flutter: 머티리얼 구조 및 레이아웃 MDC-103 Flutter: 색상, 형태, 고도, 활자를 사용한 Material Theming MDC-104 Flutter: 머티리얼 고급 구성요소

이 Codelab의 Material Flutter 구성요소 및 하위 시스템

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

이 Codelab에서는 Material Flutter에서 제공하는 기본 구성요소를 사용합니다. MDC-103: 색상, 모양, 고도, 유형을 사용한 머티리얼 디자인 테마에서 기본 구성요소를 맞춤설정하는 방법을 알아봅니다.

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

초급 중급 고급

2. Flutter 개발 환경 설정

이 실습을 완료하려면 Flutter SDK 및 편집기라는 두 가지 소프트웨어가 필요합니다.

다음 기기 중 하나를 사용하여 이 Codelab을 실행할 수 있습니다.

• 컴퓨터에 연결되어 있으며 개발자 모드로 설정된 실제 Android 또는 iOS 기기
• iOS 시뮬레이터(Xcode 도구 설치 필요)
• Android Emulator(Android 스튜디오 설정 필요)
• 브라우저(디버깅 시 Chrome 필요)
• Windows, Linux 또는 macOS 데스크톱 애플리케이션. 배포에 사용할 플랫폼에서 개발해야 합니다. 따라서 Windows 데스크톱 앱을 개발하려면 적절한 빌드 체인에 액세스할 수 있도록 Windows에서 개발해야 합니다. docs.flutter.dev/desktop에 운영체제별 요구사항이 자세히 설명되어 있습니다.

3. Codelab 시작 앱 다운로드

시작 프로젝트 다운로드

시작 프로젝트는 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

자세한 내용은 GitHub에서 저장소 클론을 참고하세요.

올바른 분기

Codelab MDC-101~104는 연속적으로 서로에 기반하여 빌드됩니다. 따라서 101의 코드를 완료하면 이 코드가 102의 시작 코드가 됩니다. 코드는 여러 분기에 걸쳐 나뉘며 다음 명령어로 모두 나열할 수 있습니다.

git branch --list

완료된 코드를 확인하려면 102-starter_and_101-complete 브랜치를 확인하세요.

프로젝트 열기 및 앱 실행

1. 원하는 편집기에서 프로젝트를 엽니다.
2. 선택한 편집기에 맞게 시작하기: 시험 운용의 '앱 실행'에 대한 안내를 따릅니다.

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

Android	iOS

코드를 살펴보겠습니다

코드의 TODO에는 숫자 (101, 102 등)가 포함되며, 이는 변경사항을 구현할 Codelab 번호를 나타냅니다.

login.dart의 위젯

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

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> {
  // TODO: Add text editing controllers (101)
  @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),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

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

• import 문을 사용하면 이 파일에서 Material 라이브러리를 사용할 수 있습니다.
• LoginPage 클래스는 시뮬레이터에 표시되는 전체 페이지를 나타냅니다.
• _LoginPageState 클래스의 build() 함수는 UI의 모든 위젯이 만들어지는 방식을 제어합니다.

Flutter UI의 기본사항과 위젯에 관한 자세한 내용은 Flutter 위젯 프레임워크 둘러보기를 참고하거나 첫 Flutter 앱 작성, 1부 Codelab을 참고하세요.

4. TextField 위젯 추가

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

머티리얼의 텍스트 필드가 브랜드 유연성을 개선하기 위해 대폭 업그레이드되었으며, 사용성 향상과 시각적 디자인을 개선하기 위해 광범위한 사용자 환경 (UX) 연구가 뒷받침되었습니다.

머티리얼 가이드라인 도움말에서 새로운 텍스트 입력란에 관해 자세히 알아보세요.

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

TextField 위젯 추가

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

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

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

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

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

Android	iOS

TextField 기능에는 다음이 포함됩니다.

• TextField 위젯의 모양을 쉽게 변경할 수 있습니다. decoration 입력란은 InputDecoration 값을 지정합니다.
• 텍스트 입력란에는 기본적으로 물결 효과 또는 '잉크'라고 하는 터치 피드백이 표시됩니다.
• FormField는 Forms에 입력란을 삽입하는 특수 기능이 있는 유사한 위젯입니다.
• TextField 클래스 문서

5. 버튼 추가

이제 '취소'와 '다음' 버튼 두 개를 로그인 페이지에 추가합니다. 버튼 위젯으로는 TextButton과 ElevatedButton을 사용합니다.

텍스트 버튼과 돌출 버튼 중에서 선택

두 개의 돌출 버튼을 표시하는 게 어떨까요? 각 버튼 유형은 다른 작업보다 더 중요한 작업을 나타냅니다.

레이아웃에는 눈에 띄는 버튼 하나가 포함되어야 합니다. 이렇게 하면 다른 버튼의 중요도가 낮다는 것이 명확해집니다. 이 눈에 잘 띄는 버튼은 사용자가 앱을 통해 진행하기를 바라는 작업을 나타냅니다.

사용자가 하지 않기를 바라는 작업은 로그인을 취소하는 것입니다. 돌출 버튼은 돌출된 모양으로 시선을 끌기 때문에 더 중요한 작업에 사용해야 합니다. 이에 비해 왼쪽에 있는 일반 텍스트 버튼은 덜 강조되어 보입니다.

버튼 계층 구조에 관한 자세한 내용은 머티리얼 가이드라인의 버튼 도움말을 참고하세요.

OverBar 추가

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

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

OverflowBar는 그 하위 요소를 한 행으로 정렬합니다.

버튼 추가

그런 다음 OverflowBar의 children 목록에 버튼 두 개를 추가합니다.

    // TODO: Add buttons (101)
    TextButton(
      child: const 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)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

onPressed: 필드에 빈 블록이 있는 이유는 무엇인가요?

null을 전달했거나 입력란을 포함하지 않았다면(기본값은 null이 됨) 버튼이 사용 중지됩니다. 터치 시 피드백이 없어 사용 설정된 동작을 제대로 파악할 수 없습니다. 빈 블록을 사용하면 버튼이 사용 중지되지 않습니다.

버튼과 버튼의 상호작용에 관한 자세한 내용은 앱에 상호작용 추가를 참고하세요.

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

Android	iOS

OverflowBar가 레이아웃 작업을 처리합니다. 버튼은 가로로 배치되므로 나란히 표시됩니다.

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

TextEditingControllers 추가

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

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

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

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

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

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

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

onPressed 수정

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

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

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

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

팝

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

탐색기는 iOS의 UINavigationController와 같이 경로 스택을 유지합니다. 경로를 푸시하면 스택 상단에 배치됩니다. 스택을 팝하면 최근에 추가된 경로가 삭제됩니다. 앱의 app.dart에서 initialRoute: '/login',를 호출하면 로그인 화면이 탐색기에 추가됩니다.

탐색 기본사항에서 경로 및 탐색에 대해 알아보세요.

ElevatedButton의 onPressed: 함수에서 Navigator의 최신 경로를 표시합니다.

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

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

    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의 시작점입니다.

버튼 정보

• TextButton과 ElevatedButton 외에도 OutlinedButton, FloatingActionButton IconButton 등이 있습니다.

6. 축하합니다.

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

완료된 MDC-101 앱은 102-starter_and_101-complete 분기에서 확인할 수 있습니다.

개발자가 만든 앱 버전을 이 분기의 앱과 비교해 테스트할 수 있습니다.

다음 단계

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

또는 MDC-102: Material Design 구조 및 레이아웃으로 이동하여 Flutter용 MDC-102에서 다루는 구성요소에 관해 알아보세요.

다음 Codelab

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

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

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

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