🦜

FlutterでTextButtonの高さと幅を設定する方法

2023/08/09に公開

[結論]styleFromでfixedSizeを指定する

TextButton(
  style: TextButton.styleFrom(
    fixedSize: const Size(200,50),// 幅,高さ
    foregroundColor: Colors.white,
    backgroundColor: Colors.blue,
  ),
  onPressed: () {},
  child: Text('テキストボタン')
)

全体コード

import 'package:flutter/material.dart';

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

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

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: Center(
          child: TextButton(
              style: TextButton.styleFrom(
                fixedSize: const Size(200,50),
                foregroundColor: Colors.white,
                backgroundColor: Colors.blue,
              ),
              onPressed: () {},
              child: Text('テキストボタン')),
        ));
  }
}

参考 : https://api.flutter.dev/flutter/material/TextButton-class.html

Discussion