Flutter - TextFormField 内的加载/进度指示器

Zol*_*ous 7 flutter

我有一个像这样的 TextFormField:

TextFormField(
        cursorColor: Colors.black,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email),
          errorMaxLines: 2,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
            ),
          ),
        ),
        autocorrect: false,
        onChanged: (_) {},
        validator: (_) {},
      ),
Run Code Online (Sandbox Code Playgroud)

每当调用onChanged()时,这个 TextFormField 就会从 api 获取电子邮件,所以我决定在里面放一个进度/加载指示器来指示它正在获取数据,但我很难弄清楚实现它。

那么有没有办法可以在 TextFormField 中插入CircularProgressIndicator()或简单的进度/加载指示器?

像这样的东西:

带有加载指示器的 TextFormField

ste*_*lis 5

TextFormEdit 没有正确的属性,即 Suffix 小部件。不过,InputDecoration 具有Suffix属性,您可以在其中附加您想要的任何进度小部件。到达此处后,您可以直接在小部件中使其保持可见或不可见(以及一系列其他设置)。

TextFormField(
        cursorColor: Colors.black,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.email),
          suffix: isLoading?CircularProgressIndicator():null
          errorMaxLines: 2,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
            ),
          ),
        ),
        autocorrect: false,
        onChanged: (_) {},
        validator: (_) {},
      ),
Run Code Online (Sandbox Code Playgroud)


Zol*_*ous 4

支持@stefanodecillis,我也可以使用Stack来实现它

              Stack(
                children: <Widget>[
                  TextFormField(
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.email),
                      errorMaxLines: 2,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          width: 2,
                        ),
                      ),
                    ),
                    autocorrect: false,
                    onChanged: (_) {},
                    validator: (_) {},
                  ),
                  (state.isSubmitting)
                      ? Positioned(
                          top: 5,
                          right: 5,
                          child: Container(
                            child: CircularProgressIndicator(),
                          ),
                        )
                      : Container(),
                ],
              ),
Run Code Online (Sandbox Code Playgroud)