[Flutter] 플러터 버튼 위젯 - 소스코드

플러터(Flutter)에서 제공하는 ElevatedButton, OutlinedButton, TextButton, IconButton, CloseButton, FloatingActionButton 에 대한 구현 전체 샘플 코드를 작성하혔습니다. 소스 전체를 Copy 하시고 그대로 빌드하면 동일한 결과를 확인하실 수 있습니다.

 

 

 

소스코드 결과 화면

플러터에서 제공하는 다양한 버튼들에 대한 상세 구현 내용을 확인 아래 포스팅에 상세하게 작성해놓았습니다.

[Flutter] 플러터 버튼 위젯 - ElevatedButton, OutlinedButton, TextButton, IconButton

 

 

 

import 'package:flutter/material.dart';

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

class MyButtons extends StatelessWidget {
  const MyButtons({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => print('ElevatedButton click!'),
                child: const Text('ElevatedButton'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                ),
              ),
              SizedBox(height: 20),
              OutlinedButton(
                onPressed: (() => print('OutlinedButton click!')),
                child: const Text(
                  'OutlinedButton',
                  style: TextStyle(color: Colors.black, fontSize: 22),
                ),
                style: OutlinedButton.styleFrom(
                    padding: EdgeInsets.all(20),
                    side: BorderSide(color: Colors.black, width: 4)),
              ),
              SizedBox(height: 20),
              Container(
                width: double.infinity,
                height: 60,
                child: ElevatedButton(
                  onPressed: () => print('ElevatedButton click!'),
                  child: const Text('ElevatedButton'),
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => print('ElevatedButton click!'),
                child: const Text('ElevatedButton'),
              ),
              SizedBox(height: 20),
              OutlinedButton(
                onPressed: (() => print('OutlinedButton click!')),
                child: const Text(
                  'OutlinedButton',
                ),
              ),
              SizedBox(height: 20),
              TextButton(
                onPressed: (() => print('TextButton click!')),
                child: const Text('TextButton'),
              ),
              SizedBox(height: 20),
              IconButton(
                onPressed: (() => print('IconButton click!')),
                icon: Icon(Icons.access_alarm),
              ),
              SizedBox(height: 20),
              CloseButton(
                onPressed: (() => print('CloseButton click!')),
              ),
              SizedBox(height: 20),
              FloatingActionButton(
                onPressed: (() => print('FloatingActionButton click!')),
                child: Icon(Icons.add),
              ),
            ],
          ),
        ),
      ),
    );
  }
}