[flutter] 27강(패치강좌) | 플러터 2.0 버튼

✅ 이번 시간에는 버튼에 대해서 알아볼 예정이야.

패치강좌가 1,2로 연속해서 있어서 18강 이후에 들으면 좋아

 

결과화면

 

RaisedButton -> ElevatedButton

FlatButton -> TextButton

OutlineButton -> OutlinedButton

 

강의가 길었지만 전체적으로 어려운건 없었어.

🔸주요 특이점🔸

 - TextButton에서 background속성이 존재하지만 다른 버튼에는 백그라운드가 없어서 styleForm안에서 color를 사용해서 백그라운드를 설정해야 한다.

 

✅ 코드리뷰 및 이해

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme: ThemeData(primarySwatch: Colors.red // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
          ),
      home: MyButton(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          TextButton(
            onPressed: () {
              // 버튼 클릭시 required이다.
              print("text button is clicked");
            },
            onLongPress: () {
              // 길게 누르면
              print("text button is long clicked");
            },
            child: Text(
              'Text Button',
              style: TextStyle(fontSize: 20.0), // 텍스트 버튼
            ),
            style: TextButton.styleFrom( // 스타일 폼에서 작성할 수 있음
                primary: Colors.red, // 텍스트 색 바꾸기
                backgroundColor: Colors.blue), // 백그라운드로 컬러 설정
          ),
          ElevatedButton(
            onPressed: () {
              print('ElevatedButton is clicked');
            },
            child: Text('ElevatedButton'),
            style: ElevatedButton.styleFrom(
                // background 속성이 없다.
                primary: Colors.orangeAccent,
                shape: RoundedRectangleBorder(
                    // 테두리를 라운드하게 만들기
                    borderRadius: BorderRadius.circular(10.0)),
                elevation: 0.0),
          ),
          OutlinedButton(
            onPressed: () {
              print('OutlinedButton is clicked');
            },
            child: Text('OutlinedButton'),
            style: OutlinedButton.styleFrom(
                // background 속성이 없다.
                primary: Colors.green,
                side: BorderSide( // 테두리 바꾸는 속성
                  color: Colors.black87,
                  width: 2.0,
                )),
          ),
          TextButton.icon(
            // 텍스트버튼에 아이콘 넣기
            onPressed: () {
              print('Icon button');
            },
            icon: Icon(Icons.home, size: 30),
            label: Text('GO to home'),
            style: TextButton.styleFrom(primary: Colors.purple),
          ),
          ElevatedButton.icon(
            // 텍스트버튼에 아이콘 넣기
            onPressed: null, // 버튼 클릭 비활성화 -> 비활성화 시의 UI는 onSurface로 가능
            icon: Icon(Icons.home, size: 30),
            label: Text('GO to home'),
            style: TextButton.styleFrom(
              minimumSize: Size(200,50) // 버튼 크기를 지정해서 바꾸기
            ),
          ),
          OutlinedButton.icon(
            // 텍스트버튼에 아이콘 넣기
            onPressed: () {
              print('Icon button');
            },
            icon: Icon(Icons.home, size: 30, color: Colors.black87), // 아이콘 색
            label: Text('GO to home'),
            style: TextButton.styleFrom(primary: Colors.blue), // 글자 색
          ),
          ElevatedButton.icon(
            // 텍스트버튼에 아이콘 넣기
            onPressed: null, // 버튼 비활성화
            icon: Icon(Icons.home, size: 30),
            label: Text('GO to home'),
            style: TextButton.styleFrom(onSurface: Colors.pink),
          ),
          ButtonBar( // 버튼 바
            alignment: MainAxisAlignment.center, // 중앙 정렬
            buttonPadding: EdgeInsets.all(20), // 버튼의 패딩 주기
            children: [
              TextButton(onPressed: () {}, child: Text('TextButton')),
              ElevatedButton(onPressed: () {}, child: Text('Elevated')),
            ],
          )
        ]),
      ),
    );
  }
}

ButtonBar의 경우에는 버튼의 가로로 여러개가 배치되어 있는데 화면의 가로 너비가 부족해서 세로로 전환해야할 때 반응형 웹처럼 자동으로 바꿔주는 것이다.