flutter - 플러터 2.0 버튼

[Buttons]

- RaisedButton => ElevatedButton

 

- FlatButton => TextButton

 

 

몰라서 고생했던 점이 있는데 .icon 붙은 버튼들은 child를 가질 수 없다.

 

버튼 안에 여러가지 요소들을 집어 넣고 싶다면

.icon을 붙이지 않은 버튼에 child ->children ->Row()를 선언해서 그 안에 구현한다.

 

 

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'NewButton',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
                onPressed: (){
                  print('text button');
                },
                onLongPress: (){    // 버튼을 오래 눌렀을때 실행되는 동작
                  print('text long button');
                },
                child: Text('Text Button',
                style: TextStyle(
                  fontSize: 20.0,
                  //color: Colors.red,
                ),
                ),
              style: TextButton.styleFrom(
                primary: Colors.blue,
                //backgroundColor: Colors.purple,

              ),
            ),
            ElevatedButton(
                onPressed: (){
                  print('Elevated button');
                },
                child: Text('Elevated Button'),

              //ElevatedButton 은 backgroundColor 속성이 없다.
              //ElevatedButton 에서는 primary 속성이 배경색을 담당한다.
                style: ElevatedButton.styleFrom(
                  primary: Colors.orangeAccent,
                  shape: RoundedRectangleBorder(    
                  // shape : 버튼의 모양을 디자인 하는 기능
                  
                    borderRadius: BorderRadius.circular(10.0)
                 ),
                    elevation: 0.0
              ),
            ),
            OutlinedButton(
                onPressed: (){
                  print('Outlined Button');
                },
                child: Text('Outlined Button'),
              style: OutlinedButton.styleFrom(
                primary: Colors.green,
                side: BorderSide(
                  color: Colors.black87,
                  width: 2.0
                )
              ),
            ),
            // 버튼 옆에 아이콘을 넣고 싶다면 TextButton.icon을 불러오자.
            TextButton.icon(
                onPressed: (){
                  print('TextButton Button');
                },
                icon: Icon(
                  Icons.home,
                  size: 30.0,
                  color: Colors.black87, 
                  // 아이콘에서 색상을 지정하지 않았다면, 
                  //밑에 primary에서 지정한 색상이 적용된다.
                ),
                label: Text('Go to home'),
                style: TextButton.styleFrom(
                  primary: Colors.purple
                ),
            ),
            ElevatedButton.icon(
                onPressed: null,  // onPressed에 null 을 넣으면 버튼이 비활성화 됨
                // onPressed: (){
                //   print('Go to home');
                // },
                icon: Icon(
                  Icons.access_alarm,
                  size: 40,
                  color: Colors.lightGreen,
                ),
               label: Text('access alarm'),
               style: TextButton.styleFrom(
                   primary: Colors.purple, 
                   minimumSize: Size(200, 50),   // 버튼의 크기 조절하는 속성
                   onSurface : Colors.lightGreen // 비활성화된 버튼 색도 바꿀 수 있다.
              ),
            ),

            // ButtonBar : 버튼들을 가로방향으로 끝정렬 시켜주고,
            //만약 가로방향 공간이 부족하면 자동으로 버튼을 세로로 배치해준다.
            ButtonBar(
              alignment: MainAxisAlignment.center,  //ButtonBar 버튼들이 중앙으로 이동
              buttonPadding: EdgeInsets.all(20),    // 버튼들의 패딩값을 주기
              children: [
                TextButton(
                    onPressed: (){},
                    child: Text('Text Button')
                ),
                ElevatedButton(
                    onPressed: (){},
                    child: Text('Elevated Button'))
              ],
            )
          ],
        ),
      )
    );
  }
}

 

 

 

 

 

[결과 화면]