在 Flutter 中，如果要實現一個可以讓使用者輸入文字的元件，我們可以使用 TextField 這個類別。TextField 是一個繼承自 StatefulWidget 的元件，也就是說它有自己的狀態和生命週期。我們可以通過 TextField 的屬性和方法來控制它的外觀和行為。

main.part

import 'package:flutter/material.dart';

import 'package:flutter_textinput_example/screens/textinput_screen.dart';



void main() {

  runApp(const EntryPointApp());

}



class EntryPointApp extends StatelessWidget {

  const EntryPointApp({super.key});



  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter TextInput Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      routes: {

        "/task":(BuildContext context) => TextInputScreen(),

      },        

      initialRoute: "/task",

    );

  }

}

screens/textinput_screen.dart

import 'package:flutter/material.dart';



// ignore: must_be_immutable

class TextInputScreen extends StatefulWidget {

  TextInputScreen({super.key});

  

  List<String> todoList = [];



  @override

  State createState() {

    return _TextInputScreen();

  }

}



class _TextInputScreen extends State<TextInputScreen>{

  @override

  Widget build(BuildContext context) {

    var textEditController = TextEditingController();



    Widget userInputTextField = SizedBox(

      width: 500,

      child: TextField(

        decoration: const InputDecoration(

          border: OutlineInputBorder(),

          hintText: '輸入要執行的任務'

        ),

        controller: textEditController,

        onSubmitted: (inputvalue){

          setState(() {

            widget.todoList.add(inputvalue);

            textEditController.clear();

          });

        },

      ),

    );



    return Scaffold(

      body: Container(alignment: Alignment.topCenter,

      child: Column(children: [userInputTextField,

      ...widget.todoList.map((taskString) => Text(taskString)).toList()]),),

    );

  }

}