[Flutter] 처음 Flutter 입문자라면 한번 보면 좋을 머터리얼 구성요소 기본사항 😄

최근에 궁금한 부분이 있었는데 물어볼 곳이 없어서
찾다가 Flutter오픈 채팅방이 있어서 들어가서 인사를 했는데..

[Me] -"안녕하세요:) 플루터 배운지 3개월정도 됬습니다ㅎ 잘 부탁드립니다."
라고 했다가...
[가] - 플러러요?
[나] - 플러터보단 플러팅이..
[다] - 플루토요?
[라] - 플루터 했더니 플루에 걸린건가...
.
.
.
요렇게 10분동안 말장난이 시작되었다는.. 🥲

 

 

Material Design란?

사용자 인터페이스 디자인의 모범 사례를 지원하는 적응형 가이드라인, 구성요소 및 도구 시스템.

오픈 소스 코드를 기반으로 하는 Material Design은 디자이너와 개발자 간의 협업을 간소화하고 팀이 아름다운 제품을 신속하게 구축할 수 있도록 지원함.

 

Material Flutter 라이브러리

앱과 플랫폼 전반에 걸쳐 일관적인 사용자 환경을 만들기 위해 Material Design 구성요소 (줄여서 MDC)의 디자인을 구현하는 Flutter 위젯이 포함되어 있음.

 

---

시작하기전.

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

---

MDC-101 목표  : 로그인 화면 만들기.

 

1. 이메일, 패스워드 입력할 Textfield 만들기.

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,
),

 

2.Textfield 안에 TextEditingController 넣기.

final _usernameController = TextEditingController();
final _passwordController = TextEditingController();

TextField(
       controller: _usernameController,
       decoration: const InputDecoration(
       filled: false,
       labelText: 'Username',
         ),
       ), 
const SizedBox(height: 12.0), 
TextField(
       controller: _passwordController,
       decoration: const InputDecoration(
       filled: true,
       labelText: 'Password',
         ),
       obscureText: true,
 )

 

❗️Textfield위젯과 세트로 알아야 할 컨트롤러!

TextEditingController

: 편집이 가능한 TextField에 입력된 값을 가지고 오거나 입력된 값이 변경될 때 사용하는 클래스

 

기능

• clear() : 입력한 텍스트 모두 삭제 

editingController.clear();

• text : 현재 입력된 값 가져오기 (string)

editingController.text

• addListener: 상태가 변경이 될때마다 알려줌.

editingController.addListener({function});

• dispose(): 리소스 해제.

editingController.dispose();

 

---

💡함께 알아두면 좋을 InputDecoration

InputDecoration을 사용하면 Textfield 위젯을 좀 더 다양하게 사용할 수 있음.

TextField(
  decoration: InputDecoration(
    labelText: 'Email', //<- 입력된 텍스트
    hintText: 'Enter your email', //<- 힌트로 보여주는 텍스트
    labelStyle: TextStyle(color: Colors.redAccent), 
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(width: 1, color: Colors.redAccent),
    ),
    enabledBorder: OutlineInputBorder( //<- 포커스됫을 때 
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      borderSide: BorderSide(width: 1, color: Colors.redAccent),
    ),
    border: OutlineInputBorder( //<- 기본 모양
      borderRadius: BorderRadius.all(Radius.circular(10.0)), 
    ),
  ),
  keyboardType: TextInputType.emailAddress,

 

---

3. 버튼 추가

사용자가 앱을 통해 진행하기를 바랄때는 ElevatedButton, 사용자가 하지 않기를 바랄 때는 TextButton 지향.

(이외에도 OutlinedButton, FloatingActionButton IconButton 등이 있음.)

버튼의 모양

 

 OverflowBar(
      alignment: MainAxisAlignment.end,
      // TODO: Add a beveled rectangular border to CANCEL (103)
      children: <Widget>[
      // TODO: Add buttons (101)
            TextButton(
               child: const Text('CANCEL'),
               onPressed: () {
                 // TODO: Clear the text fields (101)
                  _usernameController.clear();
                  _passwordController.clear();
                },
             ),
             // 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)
                   Navigator.pop(context);
                 },
              ),
         ],
    )

 

---

💡함께 알아두면 좋을 OverflowBar

: 자식뷰를 정렬시킴.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSOverflowBarRoute")),
      body: Column(
        children: [
          OverflowBar(
            alignment: MainAxisAlignment.end,  
            spacing: 20.0,  
            textDirection: TextDirection.ltr,  
            overflowSpacing: 20.0,  
            overflowAlignment: OverflowBarAlignment.center,  
            overflowDirection:
                VerticalDirection.down,  
            clipBehavior: Clip.hardEdge,  
             
            children: [
              ElevatedButton(onPressed: () {}, child: Text("1XXXXXXXXXXX1")),
              ElevatedButton(onPressed: () {}, child: Text("1YYYYYYYYYYY1")),
            ],
          ),
          OverflowBar(
            alignment: MainAxisAlignment.spaceAround,  
            spacing: 20.0, 
            textDirection: TextDirection.rtl, 
            overflowSpacing: 20.0,  
            overflowAlignment: OverflowBarAlignment.center,  
            overflowDirection:
                VerticalDirection.down,  
            clipBehavior: Clip.hardEdge,  
      
            children: [
              ElevatedButton(onPressed: () {}, child: Text("2XXXXXXXXXXX2")),
              ElevatedButton(onPressed: () {}, child: Text("2YYYYYYYYYYY2")),
            ],
          ),
          OverflowBar(
            alignment: MainAxisAlignment.end, 
            spacing: 20.0,
            textDirection: TextDirection.ltr, 
            overflowSpacing: 10.0,
            overflowAlignment: OverflowBarAlignment.center, 
            overflowDirection:
                VerticalDirection.down, 
            clipBehavior: Clip.none,  
            children: [
              ElevatedButton(onPressed: () {}, child: Text("3XXXXXXXXXXX3")),
              ElevatedButton(onPressed: () {}, child: Text("3YYYYYYYYYYY3")),
              ElevatedButton(onPressed: () {}, child: Text("3ZZZZZZZZZZZ3")),
            ],
          ),
          OverflowBar(
            alignment: MainAxisAlignment.end,
            spacing: 20.0, 
            textDirection: TextDirection.ltr, 
            overflowSpacing: 10.0,
            overflowAlignment: OverflowBarAlignment.end, 
            overflowDirection:
                VerticalDirection.up, 
            clipBehavior: Clip.none,
            children: [
              ElevatedButton(onPressed: () {}, child: Text("4XXXXXXXXXXX4")),
              ElevatedButton(onPressed: () {}, child: Text("4YYYYYYYYYYY4")),
              ElevatedButton(onPressed: () {}, child: Text("4ZZZZZZZZZZZ4")),
            ],
          ),
        ],
      ),
    );
  }
}

---

MDC-102 목표 : 상품 목록 리스트 만들기

 

1. 상단에 앱바 추가

 

 

 

 

 

return Scaffold(
      // TODO: Add app bar (102)
      appBar: AppBar(
        title: Text('SHRINE'), //
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: 'menu',
          ),
          onPressed: () {
            print('Menu button');
          },
        ),
        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: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
    );

2. 상품 목록 만들기 (GridView 사용)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

상품 보여줄 Card추가 (상품 정보는 다 예제 파일 안에 들어 있음.)

List<Card> _buildGridCards(BuildContext context) {
    List<Product> products = ProductsRepository.loadProducts(Category.all);

    if (products.isEmpty) {
      return const <Card>[];
    }

    final ThemeData theme = Theme.of(context);
    final NumberFormat formatter = NumberFormat.simpleCurrency(locale: Localizations.localeOf(context).toString());

    return products.map((product) {
      return Card(
        clipBehavior: Clip.antiAlias,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            AspectRatio(aspectRatio: 18/11,
            child: Image.asset(product.assetName,
            package: product.assetPackage,),),
            Expanded(child: Padding(
              padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    product.name,
                    style: theme.textTheme.titleLarge,
                    maxLines: 1,
                  ),
                  const SizedBox(height: 8.0,),
                  Text(
                    formatter.format(product.price),
                    style: theme.textTheme.titleSmall,
                  )
                ],
              ),
            ))
          ],
        ),
      );
    }
    ).toList();

  }

GridView안에 카드 추가.

return Scaffold(
      // TODO: Add app bar (102)
      appBar: AppBar(
        title: Text('SHRINE'),
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: 'menu',
          ),
          onPressed: () {
            print('Menu button');
          },
        ),
        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');
            },
          ),
        ],
      ),
      // TODO: Add a grid view (102)
      body: GridView.count(crossAxisCount: 2,
      padding: const EdgeInsets.all(16),
      childAspectRatio: 8.0/9.0,
      children: _buildGridCards(context),)
      // TODO: Set resizeToAvoidBottomInset (101)
    );
  }

 

여기까지 했다면 기본은 다 아는 것! ㅎ

 

 

[전체 소스]

: git@github.com:AlimE1789/materialComponents_101_102.git