【Flutter】ボタンにアイコンを付ける|ElevatedButton.icon

今回はElevatedButtonOutlinedButtonTextButtonのアイコンを付ける方法を2つ紹介します。

本記事ではElevatedButtonで使用方法を紹介しますがOutlinedButtonTextButtonでも同様に使用できます。

\ 世界最大級のオンライン学習サービス /

目次

ボタンにRowを使用してアイコンを表示

ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.facebook),
      SizedBox(
        width: 10,
      ),
      Text('Facebookアカウントでログイン'),
    ],
  ),
),

アイコンを表示する1つ目の方法がRowを使用する方法です。

上記コードではElevatedButtonchildRowを渡してアイコンとテキストを表示しています。Rowでも問題ありませんが次のコンストラクタを使用した方がコードが短くなります。

ElevatedButton.iconでアイコンを表示

ElevatedButton.icon
  icon: Icon(Icons.facebook),
  label: Text('Facebookアカウントでログイン'),
  onPressed: () {},
),

ElevatedButtonのコンストラクタElevatedButton.iconを使用することで簡単にアイコンとテキストを表示できます。

iconlabelそれぞれの引数にアイコンまたはテキストとするWidgetを渡します。

OutlineButtonとTextButtonも同様

Column(
  children: [
    OutlinedButton.icon(
      onPressed: () {},
      icon: FaIcon(FontAwesomeIcons.facebook),
      label: Text('Facebookアカウントでログイン'),
    ),
    TextButton.icon(
      onPressed: () {},
      icon: FaIcon(FontAwesomeIcons.facebook),
      label: Text('Facebookアカウントでログイン'),
    ),
  ],
),

OutlinedButtonTextButtonでも同様にコンストラクタiconを使用できます。

サンプルコード

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlutterZero'),
        ),
        body: MyCustomApp(),
      ),
    );
  }
}

class MyCustomApp extends StatefulWidget {
  const MyCustomApp({Key? key}) : super(key: key);

  @override
  State<MyCustomApp> createState() => _MyCustomAppState();
}

class _MyCustomAppState extends State<MyCustomApp> {
  final key = UniqueKey();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton.icon(
            onPressed: () {},
            icon: FaIcon(FontAwesomeIcons.facebook),
            label: Text('Facebookアカウントでログイン'),
          ),
          OutlinedButton.icon(
            onPressed: () {},
            icon: FaIcon(FontAwesomeIcons.facebook),
            label: Text('Facebookアカウントでログイン'),
          ),
          TextButton.icon(
            onPressed: () {},
            icon: FaIcon(FontAwesomeIcons.facebook),
            label: Text('Facebookアカウントでログイン'),
          ),
        ],
      ),
    );
  }

一緒に読みたい

参考

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