Flutter 如何使用列表中的数据在颤振中打印listview？

我有一个步进格式，我用它从用户那里获取输入。共有3个步骤，用户在每个步骤上提供输入，并在单击“保存”按钮时将输入保存到列表中。现在，问题是，我能够在我的控制台上打印列表。但是我不知道如何在按钮上方的屏幕上打印它，或者如果任何字段为空，我想在按钮上方显示错误消息。有人能帮我吗？我有以下代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Stepper Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Stepper Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentStep = 0;
  TextEditingController nameController = TextEditingController();
  TextEditingController emailController = TextEditingController();
  TextEditingController addressController = TextEditingController();
  List<String> demoList = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Stepper(
            steps: _mySteps(),
            currentStep: this._currentStep,
            onStepTapped: (step) {
              setState(
                () {
                  this._currentStep = step;
                },
              );
            },
            onStepContinue: () {
              setState(
                () {
                  if (this._currentStep < this._mySteps().length - 1) {
                    this._currentStep = this._currentStep + 1;
                  } else {
                    //Logic to check if everything is completed
                    print('Completed, check fields.');
                  }
                },
              );
            },
            onStepCancel: () {
              setState(
                () {
                  if (this._currentStep > 0) {
                    this._currentStep = this._currentStep - 1;
                  } else {
                    this._currentStep = 0;
                  }
                },
              );
            },
          ),
          ElevatedButton(
            onPressed: viewList,
            child: Text("Click to see List"),
          ),
        ],
      ),
    );
  }

  viewList() {
    if (nameController.text.isEmpty ||
        emailController.text.isEmpty ||
        addressController.text.isEmpty) {
      // //// Print Error message display in the screen above the button //
    } else {
      demoList.add(nameController.text);
      demoList.add(emailController.text);
      demoList.add(addressController.text);
    }
    print(demoList);
  }

  List<Step> _mySteps() {
    List<Step> _steps = [
      Step(
        title: Text('Step 1'),
        content: TextField(
          controller: nameController,
        ),
        isActive: _currentStep >= 0,
      ),
      Step(
        title: Text('Step 2'),
        content: TextField(
          controller: emailController,
        ),
        isActive: _currentStep >= 1,
      ),
      Step(
        title: Text('Step 3'),
        content: TextField(
          controller: addressController,
        ),
        isActive: _currentStep >= 2,
      )
    ];
    return _steps;
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（新的MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振步进演示”，
主题：新主题数据(
主样本：颜色。蓝色，
),
主页：新的MyHomePage（标题：“Stepper教程”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>new_MyHomePageState（）；
}
类_MyHomePageState扩展状态{
int _currentStep=0；
TextEditingController name控制器=TextEditingController（）；
TextEditingController emailController=TextEditingController（）；
TextEditingController地址控制器=TextEditingController（）；
列表demoList=[]；
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：新文本（widget.title），
),
正文：专栏(
儿童：[
步进机(
步骤：_mySteps（），
currentStep：此。\ u currentStep，
步骤：（步骤）{
设定状态(
() {
这是。_currentStep=步骤；
},
);
},
onStepContinue:（）{
设定状态(
() {
if（this.\u currentStep0）{
此._currentStep=此._currentStep-1；
}否则{
这一点。_currentStep=0；
}
},
);
},
),
升降按钮(
按下：查看列表，
子项：文本（“单击查看列表”），
),
],
),
);
}
视图列表（）{
如果（nameController.text.isEmpty）||
emailController.text.isEmpty||
addressController.text.isEmpty）{
/////在按钮上方的屏幕上显示打印错误消息//
}否则{
添加（nameController.text）；
添加（emailController.text）；
demoList.add（addressController.text）；
}
打印（人口统计）；
}
列表_mySteps（）{
列表_步骤=[
台阶(
标题：文本（“步骤1”），
内容：TextField(
控制器：名称控制器，
),
isActive:_currentStep>=0，
),
台阶(
标题：文本（“步骤2”），
内容：TextField(
控制器：emailController，
),
isActive:_currentStep>=1，
),
台阶(
标题：文本（“步骤3”），
内容：TextField(
控制器：地址控制器，
),
isActive:_currentStep>=2，
)
];
返回步骤；
}
}

虽然我不确定这一步是否可以完成，但我通常将

表单

与

TextFormField

一起使用，您可以为表单添加一个

验证器

，以检查值是否为空，并用消息提醒用户。例如：

TextFormField(
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'Please enter some text'; // the message which you alert the user that he needs to enter the value
                          }
                          return null;
                        },
                        keyboardType: TextInputType.text,
                      ),

作为listView条件的一部分，您可以使用一些if/switch大小写或迭代器。将一个小部件（

ListView.builder

）放在按钮上方，就像前面提到的使用和if/switch case或迭代器一样，您可以在其中声明：

if (formIsEmpty){
//logic when the form is empty
} ? ListView.builder() : Cointainer()

那么，让我来解释一下。首先，它会在按钮上方显示一个空容器或您喜欢的任何其他小部件，但是当满足ListView.builder的逻辑时，您就会触发lisview，它会根据您的意愿显示列表

这通常与登录表单一起使用，当您错过密码时，会出现一个链接，该链接用于重置密码等

bool _forgotPassword = false;
 _forgotPassword 
            ? TextButton(
                onPressed: () async {
                  //await your logic for forgotton password
                },
                child: Text('Forgot Password'))
            : Container(),

// ABOVE IS THE LOGIC FOR SHOWING THE WIDGET (IN YOUR CASE LISTVIEW.BUILDER) AFTER AN ACTION IS PERFORMED
        TextButton(
            onPressed: () async {
              //await your login logic, if it returns false\error\not authenticated, then you can change the state of _forgotPassword, and then shows 'forgot password TextButton'
              setState(() {
                _forgotPassword = true;
              });
            },
            child: Text('Login'))

---

事实上，我知道如何在表单和验证中使用它。但在本例中，我只想使用if条件（例如：if（DemoList.isNotEmpty）{Show listview）else）在按钮上方的listview生成器中打印（姓名、电子邮件和地址）列表{用listview显示错误）…这就是我正在寻找的。我已经更新了答案。@GrandMagnus…感谢您的支持。我从您的帮助中得到了这个想法：）我很高兴它有帮助，干杯！