ブログ

OutlinedButtonとは

OutlinedButtonは、FlutterのMaterial Designライブラリに含まれるウィジェットの一つです。ボタンの形状は四角で、ボーダー（枠線）が特徴的です。ボタンの内部は透明で、押下時にはボーダーとテキストの色が変わります。

基本的な使用方法は以下のようになります。

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Text('Button'),
)

このコードは、テキストが’Button’と表示されるOutlinedButtonを作成します。onPressedプロパティには、ボタンが押されたときに実行される関数を指定します。

マージンを設定する方法については、次のセクションで詳しく説明します。

マージンの設定方法

Flutterでは、ウィジェットのマージンを設定するためにContainerウィジェットを使用します。Containerは、子ウィジェットにパディング（内側の余白）やマージン（外側の余白）を追加することができます。

OutlinedButtonのマージンを設定する基本的なコードは以下の通りです。

Container(
  margin: EdgeInsets.all(10.0), // 全ての辺に10ピクセルのマージンを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、全ての辺に10ピクセルのマージンを持つOutlinedButtonを作成します。EdgeInsets.all(10.0)は、全ての辺に同じサイズのマージンを適用します。異なるサイズのマージンを設定したい場合は、EdgeInsets.onlyを使用します。

Container(
  margin: EdgeInsets.only(top: 10.0, left: 20.0), // 上に10ピクセル、左に20ピクセルのマージンを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、上に10ピクセル、左に20ピクセルのマージンを持つOutlinedButtonを作成します。EdgeInsets.onlyは、特定の辺にだけマージンを適用します。

次のセクションでは、Containerを使わずにマージンを設定する方法について説明します。

Containerを使う方法

Flutterでは、Containerウィジェットを使用してマージンを設定することが一般的です。Containerは、子ウィジェットにパディング（内側の余白）やマージン（外側の余白）を追加することができます。

OutlinedButtonのマージンを設定する基本的なコードは以下の通りです。

Container(
  margin: EdgeInsets.all(10.0), // 全ての辺に10ピクセルのマージンを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、全ての辺に10ピクセルのマージンを持つOutlinedButtonを作成します。EdgeInsets.all(10.0)は、全ての辺に同じサイズのマージンを適用します。異なるサイズのマージンを設定したい場合は、EdgeInsets.onlyを使用します。

Container(
  margin: EdgeInsets.only(top: 10.0, left: 20.0), // 上に10ピクセル、左に20ピクセルのマージンを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、上に10ピクセル、左に20ピクセルのマージンを持つOutlinedButtonを作成します。EdgeInsets.onlyは、特定の辺にだけマージンを適用します。

次のセクションでは、Paddingを使ってマージンを設定する方法について説明します。

Paddingを使う方法

Flutterでは、Paddingウィジェットを使用してマージンを設定することも可能です。Paddingは、子ウィジェットにパディング（内側の余白）を追加することができます。

OutlinedButtonのマージンを設定する基本的なコードは以下の通りです。

Padding(
  padding: EdgeInsets.all(10.0), // 全ての辺に10ピクセルのパディングを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、全ての辺に10ピクセルのパディングを持つOutlinedButtonを作成します。EdgeInsets.all(10.0)は、全ての辺に同じサイズのパディングを適用します。異なるサイズのパディングを設定したい場合は、EdgeInsets.onlyを使用します。

Padding(
  padding: EdgeInsets.only(top: 10.0, left: 20.0), // 上に10ピクセル、左に20ピクセルのパディングを追加
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
    },
    child: Text('Button'),
  ),
)

このコードは、上に10ピクセル、左に20ピクセルのパディングを持つOutlinedButtonを作成します。EdgeInsets.onlyは、特定の辺にだけパディングを適用します。

次のセクションでは、具体的な使用例について説明します。

使用例

以下に、OutlinedButtonのマージンを設定する具体的な使用例を示します。

Padding(
  padding: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0, bottom: 10.0),
  child: OutlinedButton(
    onPressed: () {
      // ボタンが押された時の処理
      print('Button pressed!');
    },
    child: Text('Submit'),
  ),
)

このコードは、上と下に10ピクセル、左と右に20ピクセルのパディングを持つOutlinedButtonを作成します。ボタンが押されると、コンソールにButton pressed!と表示されます。

このように、Paddingウィジェットを使用することで、OutlinedButtonのマージンを簡単に設定することができます。マージンを設定することで、ボタンの位置を調整し、UIの見た目を改善することが可能になります。この知識を活用して、より使いやすいFlutterアプリを作成しましょう！