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

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(), // 外枠を追加
        ),
      ),
    );
  }
}

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

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