[ Flutter ] Button(버튼) 사용하기

안녕하세요 이번 글에서는 flutter의 기본적은 버튼 3가지를 알아보겠습니다.

 

 

1. [ ElevatedButton ]

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              ElevatedButton(
                onPressed: () {}, //클릭시 동작하는 이벤트 설정
                child: Text('ElevatedButton'),
                style: ElevatedButton.styleFrom(
                  // 메인컬러
                    primary: Colors.orange,
                    // 글자색과 리플이펙트
                    onPrimary: Colors.blue,
                    // 그림자 색깔
                    shadowColor: Colors.green,
                    // 입체감
                    elevation: 10,
                    textStyle:
                    TextStyle(fontWeight: FontWeight.w700, fontSize: 15.0),
                    padding: EdgeInsets.all(15.0), // 버튼 내부의 텍스트 padding
                    side: BorderSide(color: Colors.black, width: 4.0)), // 버튼의 border
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

실행시켜 보면 

 

 

 

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: Text('ElevatedButton_style'),
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(// 배경색 설정
                        Colors.blue),
                    foregroundColor: MaterialStateProperty.resolveWith(
                        (Set<MaterialState> states) {
                      // 버튼의 상태를 가져올수 있다.
                      // hovered - 호버랑 성태 (마우스 커서를 올려놓은 상태)
                      // pressed - 눌렀을떄
                      // disabled - 비활성화 됬을때

                      // 눌렀을 경우 글쓰를 white 로 변경 하고 기본 상태에서는 red 로 표현
                      if (states.contains(MaterialState.pressed)) {
                        return Colors.white;
                      }
                      return Colors.red;
                    }),
                    padding: MaterialStateProperty.resolveWith(
                        (Set<MaterialState> states) {
                      if (states.contains(MaterialState.pressed)) {
                        // 눌렀을 경우 padding 를 50으로 변경하고 기본 상태에서는 padding 을 20으로 설정
                        return EdgeInsets.all(50.0);
                      }
                      return EdgeInsets.all(20.0);
                    })),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

실행해 보면 

 

 

2. [ OutlineButton ]

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  // ElevatedButton 은 primary 가 background 에 맞춰져 있지만
                  // OutlineButton 은 primary 가 텍스트와 리플이펙트로 되어 있다.
                  primary: Colors.green,
                ),
                child: Text('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(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // OutlineButton 과 차이점은 테두리의 선이 없고 text 만 표시 
              TextButton(
                onPressed: () {},
                child: Text('TextButton'),
                style: TextButton.styleFrom(
                    primary: Colors.brown,),
              )
            ],
          ),
        ),
      ),
    );
  }
}