首页 > 解决方案 > 如何在颤动中显示另一个容器上方的容器?

问题描述

无输入时 无输入时

有输入时 有输入时

想要在用户输入内容后立即获得第一个容器(输入)上方的第二个容器(输出),请参考带有输入的图像。

代码到现在。

body: Center(
    child: Stack(
      children: <Widget>[
        Visibility(
          visible: _showButton,
          child: Container(
            width: double.infinity,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.yellow),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Text(
                '$_outputText',
                maxLines: null,
                style: TextStyle(fontSize: 25.0),
              ),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          child: TextFormField(
            //controller: myController,
            //keyboardType: TextInputType.multiline,
            maxLines: null,
            style: TextStyle(fontSize: 25.0, color: Colors.white),
            cursorColor: Colors.white,
            decoration: InputDecoration(
              hintText: 'Enter Text',
              hintStyle: TextStyle(fontSize: 25.0, color: Colors.grey),
              labelText: 'Input',
              labelStyle: TextStyle(fontSize: 25.0, color: Colors.black),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.white,
                    width: 1.0,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                    color: Colors.white,
                    width: 1.0,
                    style: BorderStyle.solid),
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
              ),
            ),
            onChanged: onChange,
          ),
        ),
      ],
    ),
  ),

我正在使用堆栈,因为想稍后将动画添加到第二个容器以显示为第一个容器的弹出窗口。

标签: flutter

解决方案


推荐阅读