[Flutter]flutter 버튼종류

🔎flutter 2.0 New Buttons and Button Themes

Flutter에 새로운 버튼위젯과 테마들이 추가되었다.
원래의 클래스들은 중요도가 떨어져 더 이상 사용되지 않고 제거되었다.
전반적인 목표는 버튼들을 더 유연하게 하고 , 파라미터와 테마 생성자를 통해 더 쉽게 설정할 수 있도록 하는 것이다.

FlatButton, RaisedButton 그리고 OutlinedButton 위젯들은 각각 TextButton, ElevatedButton, OutlinedButton 위젯으로 대체되었다.
theme 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme으로 바뀌었다.

버튼의 style은 textcolor property 요소를 이용해 글꼴 색상을 지정했던 것과 달리 stylefrom property 내에서 color들을 지정한다.

🔎버튼종류

TextButton-기존의 FlatButton
ElevatedButton-기존의 RaisedButton,버튼을 강조하고 싶을 때 사용한다.
OutlinedButton-기존 Outline Button

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Buttton'),
          ),
          body: Center(
            child:Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  TextButton(
                    onPressed: () {},
                    child: Text("Text BUTTON"),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("Elevated BUTTON"),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    child: Text("Outlined BUTTON"),
                  ),

                ],
            ),

          ),
        )
    );
  }
}

🔎스타일 주기

TextButton(버튼이름).styleFrom을 사용하여 버튼마다 스타일을 줄 수 있다.
-> ButtonStyle() 사용가능

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Buttton'),
          ),
          body: Center(
            child:Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [

                  TextButton(
                    onPressed: () {},
                    child: Text("Text BUTTON"),
                    style: TextButton.styleFrom(primary:Colors.pink,backgroundColor: Colors.yellow),

                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("Elevated BUTTON"),
                    style: ElevatedButton.styleFrom(
                        elevation: 25,shadowColor:Colors.blue,primary:Colors.greenAccent),
                  ),
                  OutlinedButton(
                    onPressed: () {},
                    child: Text("Outlined BUTTON"),
                    style: OutlinedButton.styleFrom(primary:Colors.black),
                  ),

                ],
            ),

          ),
        )
    );
  }
}

버튼 생성시 알아야 할 부분

child와, onPressed는 반드시 써줘야 한다.
👉🏻child를 이용해서 Text를 지정할 수 있음.
onPressed(){ 버튼 눌렀을 때 실행하고 싶은 코드 }

📍참고자료

• Flutter 공식문서