【Flutter】OutlinedButtonの形状をカスタマイズする3つの方法

2024年6月5日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

OutlinedButtonを円形や角丸にカスタマイズする方法
OutlinedButtonの斜めの角を持つ形状を作成する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

OutlinedButtonは、Flutterアプリケーションでよく使用されるボタンの一つです。その形状をカスタマイズすることで、デザインの幅が広がります。本記事では、OutlinedButtonの形状を変える3つの方法を紹介します。具体的なソースコードを交えて説明するので、初心者でも簡単に理解できるでしょう。

方法1: CircleBorderで円形のボタンを作成

CircleBorderを使用することで、ボタンを円形にカスタマイズする方法です。

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('円形ボタン'),
  style: OutlinedButton.styleFrom(
    minimumSize: Size(100, 100), // ボタンのサイズ
    shape: CircleBorder(), // 円形にする
  ),
)

コードがシンプルで、初心者でも簡単に実装できる。

方法2: RoundedRectangleBorderで角丸の四角形ボタンを作成

RoundedRectangleBorderを使用して、角が丸い四角形のボタンを作成する方法です。

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('角丸ボタン'),
  style: OutlinedButton.styleFrom(
    minimumSize: Size(150, 50), // ボタンのサイズ
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20), // 角の丸みを設定
    ),
  ),
)

角の丸みをBorderRadius.circularで簡単に調整できる。

方法3: BeveledRectangleBorderで斜めの角のボタンを作成

BeveledRectangleBorderを使用して、斜めの角を持つボタンを作成する方法です。

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('斜め角ボタン'),
  style: OutlinedButton.styleFrom(
    minimumSize: Size(150, 50), // ボタンのサイズ
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)), // 斜めの角を設定
    ),
  ),
)

独特なデザインで、他のUI要素と差別化できる。