【Flutter】フォームで使われるパーツ

フォームでよくあるパーツまとめ

テキスト入力ボックス (TextField)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyForm(),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Sample'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _textController,
              decoration: InputDecoration(labelText: '入力してください'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                print(_textController.text);
              },
              child: Text('送信する'),
            ),
          ],
        ),
      ),
    );
  }
}

テキストエリア (TextField の maxLines を指定)

maxLinesを使用すると入力行増やせる

TextField(
  maxLines: 3,
  controller: _textController,
  decoration: InputDecoration(labelText: 'Enter multi-line text'),
),

ラジオボタン (Radio)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyRadioForm(),
    );
  }
}

class MyRadioForm extends StatefulWidget {
  @override
  _MyRadioFormState createState() => _MyRadioFormState();
}

class _MyRadioFormState extends State<MyRadioForm> {
  String selectedValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            RadioListTile(
              title: Text('Option 1'),
              value: 'Option 1',
              groupValue: selectedValue,
              onChanged: (value) {
                setState(() {
                  selectedValue = value as String;
                });
              },
            ),
            RadioListTile(
              title: Text('Option 2'),
              value: 'Option 2',
              groupValue: selectedValue,
              onChanged: (value) {
                setState(() {
                  selectedValue = value as String;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

トグルボタン (Switch)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MySwitchForm(),
    );
  }
}

class MySwitchForm extends StatefulWidget {
  @override
  _MySwitchFormState createState() => _MySwitchFormState();
}

class _MySwitchFormState extends State<MySwitchForm> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Switch(
              value: isSwitched,
              onChanged: (value) {
                setState(() {
                  isSwitched = value;
                });
              },
            ),
            Text('Switch is ${isSwitched ? 'ON' : 'OFF'}'),
          ],
        ),
      ),
    );
  }
}