點燈坊

失くすものさえない今が強くなるチャンスよ

TextField 實現簡單輸入框

Sam Xiao's Avatar 2024-12-02

若不使用 TextFormField 的 validator，其實可使用 TextField，既可使用 Data Binding，又不需要 TextEditingController，程式碼更為精簡。

Version

Flutter 3.24.5

Flutter

overview01

  • Android 與 iOS 都成功使用 TextField 實現簡單輸入框

TextField

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {
  var _inputText = '';

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('TextField'),
    );

    var textField = TextField(
      onChanged: (value) {
        setState(() => _inputText = value);
      },
      style: const TextStyle(
        fontSize: 20,
      ),
    );

    var gap = const SizedBox(
      height: 20,
    );

    var text = Text(
      _inputText,
      style: const TextStyle(
        fontSize: 20,
      ),
    );

    var body = Padding(
      padding: const EdgeInsets.all(
        16.0,
      ),
      child: Column(
        children: [
          textField,
          gap,
          text,
        ],
      ),
    );

    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 11

var _inputText = '';
  • _inputText：TextField 所 data binding 的值

Line 19

var textField = TextField(
  onChanged: (value) {
    setState(() => _inputText = value);
  },
  style: const TextStyle(
    fontSize: 20,
  ),
);
  • onChanged：當輸入改變時，即時寫入 _inputText

Line 32

var text = Text(
  _inputText,
  style: const TextStyle(
    fontSize: 20,
  ),
);
  • Text：與 _inputText 綁定

Conclusion

  • TextFormField 的 validator 其實限制很多，且 layout 也不方便，實務上可以使用 TextField 取代 TextFormField，不需 TextEditingController 且程式碼更精簡

# Flutter