본문 바로가기

: IT/Flutter

플러터 2.0 버튼

반응형

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue), home: Page());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Buttons')),
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          TextButton(
              onPressed: () {
                //print('text button..');
              },
              onLongPress: () {
                print('text button..');
              },
              child: Text('Text Button', style: TextStyle(fontSize: 20)),
              style: TextButton.styleFrom(primary: Colors.red
                  // backgroundColor: Colors.blue
                  )),
          ElevatedButton(
              onPressed: () {
                print('elevated button..');
              },
              child: Text('Elevated Button'),
              style: ElevatedButton.styleFrom(
                  primary: Colors.orangeAccent,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)),
                  elevation: 0.0)),
          ButtonBar(
            alignment: MainAxisAlignment.center,
            buttonPadding: EdgeInsets.all(20.0),
            children: [
              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(
                  onPressed: null,
                  icon: Icon(Icons.home, size: 30.0, color: Colors.black87),
                  label: Text('Go to home'),
                  style: TextButton.styleFrom(
                      onSurface: Colors.pink,
                      primary: Colors.purple,
                      minimumSize: Size(200, 50)))
            ],
          )
        ])));
  }
}

1. TextButton

2. ElevatedButton

3. OutlinedButton

*아이콘 있는 버튼을 만드려면? 
TextButton.icon()
ElevatedButton.icon()
OutlinedButton.icon()

*버튼 그룹으로 만드려면?
ButtonBar(
  children: [..buttons]
)

반응형

': IT > Flutter' 카테고리의 다른 글

Final & Const 변수  (0) 2022.05.21
Focus  (0) 2022.05.21
Collection and Generic  (0) 2022.03.03
Navigator.pushNamed와 routes로 페이지 이동  (0) 2022.03.01
Widget  (0) 2022.02.12