[Flutter] Button 종류와 설정

 

1. ElevatedButton

2. OutlinedButton

3. TextButton

 

 

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('버튼'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [


            ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  shadowColor: Colors.blue,
                  elevation: 10.0, // shaodw의 강도(더 튀어나와 보이게)
                  textStyle: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 25.0,
                  ),
                  padding: EdgeInsets.all(32.0),
                  side: BorderSide( // 테두리속성
                    color: Colors.black,
                    width: 4.0,
                  )
                ),
                child: Text('Elevated Button')
            ),
            OutlinedButton(
                onPressed: (){},
                style: OutlinedButton.styleFrom(
                  backgroundColor: Colors.green,
                  foregroundColor: Colors.yellow,
                  elevation: 10.0, // 이걸 하면 elevated button이랑 같아진다고 봐야됨.
                ),
                child: Text('Outlined Button')
            ),
            TextButton(
                onPressed: (){},
                style: TextButton.styleFrom(
                  backgroundColor: Colors.pink,
                  foregroundColor: Colors.amberAccent
                ),
                child: Text('TextButton')),
            ElevatedButton(
                onPressed: (){},
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all( // 기본값 -어떤 상태에서든 고정(StyleFrom과 동일)
                        Colors.black
                    ),
                    foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {// 버튼이 어떤 상태이냐에 따라서 다른 색을 넣을 수 있다.
                      //MaterialState
                      //
                      //hovered - 호버링 상태( 마우스 커서를 올려 놓은 상태 모바일은 호버링X)
                      //focused - 포커스 됐을 때(텍스트 필드 눌렀을 때 깜빡임)
                      //pressed - 눌렸을 때(o)
                      // dragged - 드래그 됐을 때
                      // selected - 선택됐을 때 (체크박스, 라디오 버튼 등)
                      // scrollUnder - 다른 컴포넌트 밑으로 스크롤링 됐을 때
                      //disabled - 비활성화 됐을 때 ( o) (onpressed가 null로 버튼 자체가 비활성화)
                      //error - 에러상태
                      if(states.contains(MaterialState.pressed)) {
                        return Colors.white;
                      }
                      return Colors.red;
                    }
                    ),
                    padding: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
                      if(states.contains(MaterialState.pressed)){
                        return EdgeInsets.all(100.0);
                      }
                      return EdgeInsets.all(20.0);
                    }
                    )
                ),
                child: Text('ButtonStyle')),
          ],
        ),
      ),
    );
  }
}