Flutter给文本输入框添加实时计算输入字母的长度

开篇寄语

继续学习Flutter的特效，这次学习的是计算输入字母计算字母长度的特效，而且很简单，伯衡君参考文档和其他人写的一些案例后，发现只需要设置一个变量，然后再改变它即可，分享给大家。

内容详情

• 《Flutter制作弹出框背景是磨砂特效Blur Effects的例子》
• 《Flutter有关ColorFiltered一些有趣实例，图片变色大不同》
• 《Flutter制作自己的第一个全平台APP学习之实用功能篇》
• 《Flutter制作自己的第一个全平台APP学习之Networking篇》
• 《Flutter制作自己的第一个全平台APP学习之Layouts篇》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

• 涉及Textfiled组件中一个名为InputDecoration的内容，属于装饰的一种，试举一例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // This variable holds the text typeed by the user
  var _enteredText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: TextField(
            onChanged: (value) {
              setState(() {
                _enteredText = value;
              });
            },
            decoration: InputDecoration(
                labelText: 'Your Name',
                border: OutlineInputBorder(),
                counterText: '${_enteredText.length.toString()} character(s)'),
          ),
        ),
      ),
    );
  }
}

生成的效果如下图所示：