如何在 TextField 中输入文本后显示快餐栏？

Question

我有一个文本字段。在 300ms.Snackbar 应该出现在屏幕中间之后，我需要在用户完成输入单词后出现一个小吃店。如何在用户停止在文本字段中输入后 300 毫秒显示 snackbar？我的代码：

final textController = TextEditingController();
....
child: TextField(
controller: textController,
onChanged: (value) {},
)

Answer 1

请检查以下代码，看看是否有帮助。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Center(
        child: TextField(
          onEditingComplete: () {
            final snackBar = SnackBar(
              content: const Text('Yay! A SnackBar!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // Some code to undo the change.
                },
              ),
            );

            Timer(Duration(milliseconds: 300), () {
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            });
          },
        ),
      ),
    );
  }
}

Answer 2

与其他答案类似，但会在用户停止输入后出现，而不是在用户提交 TextField :

时出现

  Timer? t;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          onChanged: (v) {
            t?.cancel();
            t = Timer(const Duration(milliseconds: 300), () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(
                  content: Text('im a snackbar'),
                ),
              );
            });
          },
        ),
      ),
    );
  }

如何在 TextField 中输入文本后显示快餐栏？

How to display a snackbar after entering text in a TextField?

dart

flutter