Udemyセール開催中! 対象コースが1,220円から

【Flutter】TextButtonの使い方|ボーダーなしのフラットボタンを作る

今回は「TextButton」の基本的な使い方について紹介します。

TextButtonを使えばボーダーがないフラットなボタンを作れます!

目次

TextButtonの基本プロパティ

child & onPressed(必須)

childプロパティでボタンのラベル、onPressedプロパティでボタンがクリックされた際のVoidCallbackを指定します。

//ソース
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button'),
        ),
        body: Center(
          child: TextButton(
            child: Text(
              'OutlinedButton',
              style: TextStyle(fontSize: 20),
            ),
            onPressed: () {
              print('クリックされました');
            },
            onLongPress: () {
              print('長押しされました');
            },
          ),
        ),
      ),
    );
  }
}

onLongPress

onLongPressプロパティで長押しされた際のVoidCallbackを指定できます。

style

styleプロパティでTextButtonのstaticメソッド「styleFrom」を使用してボタンの見た目を変更できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button'),
        ),
        body: Center(
          child: TextButton(
            child: Text(
              'OutlinedButton',
              style: TextStyle(fontSize: 20),
            ),
            style: OutlinedButton.styleFrom(
              primary: Colors.green,
            ),
            onPressed: () {
              print('クリックされました');
            },
            onLongPress: () {
              print('長押しされました');
            },
          ),
        ),
      ),
    );
  }

以上です。

参考

  • URLをコピーしました!
目次
閉じる