【Flutter】ボタンの基本的な使い方|TextButton/ElevatedButton/OutlinedButton

Button

Flutterの基本的なボタンとなる3種類のWidgetを紹介します。

見た目は少し違いますが、どのWidget(ボタン)も同様に扱えます。

Button一覧
上から順にText, Elevated, OutlinedButton
ティファ

本記事では「TextButton」「ElevatedButton」「OutlinedButton」の基本的な使い方について紹介していくよ!

目次

TextButton/ElevatedButton/OutlinedButtonの基本となるプロパティ

  • child:ボタンのラベルとなるWidgetを指定
  • onPressed(onLongPress):ボタンが押された時、定義したコールバック関数を実行
  • style:ボタンの外見を指定

child

//OutlinedButtonの場合(他のボタンも同様に扱う)
OutlinedButton(
  child: Text('Hello World'),
),

childプロパティでボタンのラベルとなるWidgetを指定します。

ラベル

onPressed(onLongPress)

//OutlinedButtonの場合(他のボタンも同様に扱う)
OutlinedButton(
  onPressed: () {
    setState(() {
      print('Hello World');
    });
  },
  child: Text('Hello World'),
),

onPressedプロパティの引数にコールバック関数を代入し、ボタンが押された時に実行する処理をコールバック関数に定義します。また、onLongPressプロパティはボタンを長押ししたときに実行され、onPressedと同じように使用します。

>>【Flutter/Dart】コールバック関数と無名関数の使い方

style

OutlinedButton(
  child: Text('Hello World'),
  onPressed: () {},
  style: OutlinedButton.styleFrom( 
    primary: Colors.white,
    backgroundColor: Colors.orange,
  ),
),

styleプロパティでボタンの外見を指定できます。また、引数に静的メソッドのstyleFromメソッドを代入し外見を指定できます。

>>【Flutter/Dart】static修飾子の使い方|静的変数/静的メソッド

styleFromメソッド

styleFromのプロパティ一覧

  • primary
  • onPrimary
  • onSurface
  • shadowColor
  • elevation
  • textStyle
  • padding
  • minimumSize
  • fixedSize
  • side
  • shape
  • enabledMouseCursor
  • disabledMouseCursor
  • visualDensity
  • tapTargetSize
  • animationDuration
  • enableFeedback
  • alignment
  • splashFactory

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {
                  setState(() {
                    print('TextButtonがクリックされました');
                  });
                },
                child: Text('Hello World'),
                style: TextButton.styleFrom(
                  primary: Colors.orange,
                  textStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    print('ElevatedButtonがクリックされました');
                  });
                },
                child: Text('Hello World'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.orange,
                  textStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
              OutlinedButton(
                onPressed: () {
                  setState(() {
                    print('OutlinedButtonがクリックされました');
                  });
                },
                child: Text('Hello World'),
                style: OutlinedButton.styleFrom(
                  primary: Colors.orange,
                  textStyle: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
よかったらシェアしてね!
目次
閉じる