Zenn
🐥

【Flutter】TextField　テキストを入力する場所

2024/03/26に公開
Flutter
tech

TextFieldについて

FlutterTextFieldの配置方法→プロパティについて

このページでわかること

  • TextFieldをアプリに配置することができる
  • TextFieldのプロパティを知り実装できるようになる
    -参考サイト TextField class

TextFieldを配置してみよう

初回表示アプリにTextFildを配置します。
初回表示アプリのいらない機能を省いて下記の用にしました
Textでテキストフィールドを配置する↓と記載しています
この下に、TextFildを配置します。

main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'テキストフィールドを配置する↓',
            ),
          ],
        ),
      ),
    );
  }
}

この状態

Textの下にTextFildを配置します。

 body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'テキストフィールドを配置する↓',
            ),
+　　　　　　　TextField(),
          ],
        ),
      ),

とすることでTextFieldを追加できます

プロパティを活用していく

controllerプロパティ

TextFieldから値を取得するためにはcontrollerというプロパティを使用します。

//controllerを追加する
TextEditingController controller = TextEditingController();

こちらをクラスのインスタンス変数として定義します

class _MyHomePageState extends State<MyHomePage> {
+  TextEditingController controller = TextEditingController();

そしてTextFieldプロパティにcontrollerを追加することで、 TextFieldに入力された値を使用することができます。

TextField(
+  controller: controller,
 ),

Discussion