颤振模态底片

时间:2020-09-25 05:11:46

标签: flutter flutter-layout

我正在试验颤振模态底板。我在模态底部工作表中使用了texfield。该文本字段可以工作,但是以某种方式我无法在屏幕上看到我当前正在键入的内容。解决方法是什么?我也包括了代码。感谢您的回复。

代码如下:

    modalSheet() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Container(
            height: MediaQuery.of(context).size.height * 0.9,
            child: Column(
              children: [
                Container(
                    height: MediaQuery.of(context).size.height * 0.7,
                    child: Center(child: Text('Testing modal sheet'))),
                Padding(
                  padding: EdgeInsets.only(
                      left: 16.0, right: 16.0, top: 8.0, bottom: 8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: MediaQuery.of(context).size.height * 0.08,
                        width: MediaQuery.of(context).size.width * 0.75,
                        decoration: BoxDecoration(
                          color: Hexcolor('#E9F1FE'),
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: Padding(
                          padding:
                              const EdgeInsets.only(left: 16.0, right: 16.0),
                          child: Center(
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                suffixIcon: Icon(Icons.insert_emoticon),
                                hintText: 'Write a comment...',
                                hintStyle: TextStyle(
                                    fontSize: 18.0,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.grey),
                              ),
                            ),
                          ),
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          print('Pressed');
                        },
                        child: CircleAvatar(
                          backgroundColor: Hexcolor('#0565ac'),
                          maxRadius: 20,
                          child: Icon(
                            Icons.arrow_upward,
                            color: Colors.white,
                          ),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          );
        });
  }

为清晰起见,以下是图像:

Texfield widget in modal sheet Keypad Hiding the typed texts

0 个答案:

没有答案