[Flutter] Button 총 정리! "Raised, Flat, Icon, FloatingAction"

 

오늘은 Flutter의 Button의 종류에 대해 알아보자.

 

위의 예제 처럼 Button은 4가지로 나눌수 있으며 Rainsed, Flat, Icon, FloatingAction으로 나눌 수 있다.

 

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        title: 'MyApp',
        home: MyApp(),
      ),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RaisedButton(onPressed: () {}, child: Text('RaisedButton')),
          FlatButton(onPressed: () {}, child: Text('FlatButton')),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(onPressed: () {}, icon: Icon(Icons.add)),
              Text('(IconButton)'),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
              Text('  (FloatingActionButton)'),
            ],
          )
        ],
      ),
    );
  }
}

 

위 어플의 전체 코드다. 하나씩 살펴보자.

 

RaisedButton

RaisedButton(onPressed: () {}, child: Text('RaisedButton')),

 

튀어 나와 있는 듯한 느낌의 버튼이다.

 

onPressed로 클릭시 실행할 코드를 작성할 수 있다.

 

child의 Text로 안에 글자를 적을 수 있으며, 

 

RaisedButton(onPressed: () {}, child: Icon(Icons.add)),

 

이런식으로 안에 아이콘도 넣을 수 있다.

 

 

FlatButton

FlatButton(onPressed: () {}, child: Text('FlatButton')),

 

Raised 버튼에 비해 평평한 버튼이다. 일반 글자가 적혀있는 것 처럼 보인다.

 

Text(
  '(FlatButton)',
  style: TextStyle(fontWeight: FontWeight.bold),
),
FlatButton(onPressed: () {}, child: Text('(FlatButton)')),

 

오른쪽이 실제 버튼이다.. :D

 

onPressed로 클릭시 실행할 코드를 작성할 수 있다.

 

child의 Text로 안에 글자를 적을 수 있으며, 

 

FlatButton(onPressed: () {}, child: Icon(Icons.add)),

 

이런식으로 안에 아이콘도 넣을 수 있다.

 

IconButton

IconButton(onPressed: () {}, icon: Icon(Icons.add)),

 

onPressed로 클릭시 실행할 코드를 작성할 수 있다.

 

일반 아이콘을 버튼으로 만들고 싶을 때 사용한다.

 

AppBar에서 주로 사용 된다.

 

[Flutter] AppBar?! AppBar의 "모든 것"

[Flutter] AppBar?! AppBar의 "모든 것"

 

 

FloatingActionButton

 

FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),

 

flutter의 첫 프로젝트를 만들면 나오는 버튼의 모양이다. 가운데에 아이콘 모양을 변경 가능하며 글자도 작성 할 수 있다.