【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

【Flutter】アイコン付き検索フォームを実装し、色・サイズを変更するまでの完全ガイド!

【Flutter】アイコン付き検索フォームを実装し、色・サイズを変更するまでの完全ガイド!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • アイコン付き検索フォームの基本的な実装方法
  • 検索フォームの色とサイズをカスタマイズする方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

アイコン付き検索フォームの実装

概要

このセクションでは、アイコン付き検索フォームの基本的な実装方法を見ていきます。具体的なコードとその行ごとの説明を以下に示します。

サンプルコード

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('アイコン付き検索フォーム'),
        ),
        body: SearchForm(),
      ),
    );
  }
}

class SearchForm extends StatefulWidget {
  @override
  _SearchFormState createState() => _SearchFormState();
}

class _SearchFormState extends State<SearchForm> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextField(
        controller: _controller,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.search), // アイコンを設定
          hintText: '検索', // ヒントテキストを表示
          border: OutlineInputBorder(), // 外枠を追加
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 1行目:Materialデザインのウィジェットを使用するためにmaterial.dartをインポートします。
  • 4行目:アプリケーションのエントリーポイントです。
  • 7-19行目MyAppクラスは、アプリケーションのルートウィジェットを定義します。ここではMaterialAppウィジェットを使用しています。
  • 21-23行目SearchFormは状態を持つウィジェットです。ユーザーの入力を受け取るテキストフィールドを含んでいます。
  • 36行目TextFieldウィジェットにprefixIconプロパティを使用して、検索アイコンをテキストフィールドの先頭に追加します。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】アイコン付き検索フォームを実装

入力フォームについてもっと知りたいという読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

色の変更方法

概要

検索フォームの色をカスタマイズする方法について見ていきます。TextFielddecorationプロパティを利用して、色を変更することができます。以下のコードスニペットは、アイコンとボーダーの色を変更する方法を示しています。

サンプルコード

decoration: InputDecoration(
  prefixIcon: Icon(Icons.search, color: Colors.green), // アイコンの色を変更
  hintText: '検索',
  border: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.green), // ボーダーの色を変更
  ),
),

サンプルコードの解説

  • アイコンの色変更prefixIconIconウィジェットを渡す際に、colorプロパティを使用してアイコンの色を緑色に変更しています。
  • ボーダーの色変更borderプロパティにOutlineInputBorderを設定し、そのborderSideプロパティにBorderSideを設定することでボーダーの色を緑色に変更しています。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】アイコン付き検索フォームを実装し、色を変更する

サイズの変更方法

概要

検索フォームのサイズをカスタマイズする方法について解説します。サイズの変更は、主にpaddingmarginconstraintsプロパティを通じて行います。しかし、ここではTextFieldの高さと幅を直接的に調整する方法は限られています。代わりに、Containerウィジェットを使ってTextFieldをラップし、そのサイズを調整する方法を紹介します。

サンプルコード

Container(
  padding: EdgeInsets.symmetric(horizontal: 20.0), // 水平方向のパディングを追加
  margin: EdgeInsets.only(top: 20.0), // 上部のマージンを追加
  child: TextField(
    // TextFieldの設定は同上
  ),
)

サンプルコードの解説

  • パディングの追加Containerウィジェットのpaddingプロパティを使用して、水平方向に20ピクセルのパディングを追加しています。これにより、TextFieldの内側の余白が増えます。
  • マージンの追加Containerウィジェットのmarginプロパティを使用して、コンテナの上部に20ピクセルのマージンを追加しています。これにより、TextFieldと他のウィジェットとの間に余白が生まれます。

表示確認

いちの

それでは、表示を確認してみましょ〜

【Flutter】アイコン付き検索フォームを実装し、サイズを変更する

余白についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、アイコン付き検索フォームを実装し、色・サイズを変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次