bootSheet解决输入框盖住问题-优快云博客

本文链接：https://blog.youkuaiyun.com/hsqchdn/article/details/103400607

本文展示了一个使用Flutter框架实现的底部弹出菜单示例，通过showModalBottomSheet方法创建了一个带输入框的动态填充区域，用于发表评论，并包含一个发布按钮。此示例详细介绍了如何在Flutter应用中集成底部弹出菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'showModalBottomSheet',
      home: BasicPage(),
    );
  }
}

class BasicPage extends StatefulWidget {
  @override
  _BasicPageState createState() => _BasicPageState();
}

class _BasicPageState extends State<BasicPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("showModalBottomSheet"),
        ),
        body: Center(

        ),
        bottomNavigationBar: BottomAppBar(
          child: bottomNewCommentButton(),
        ),
    );
  }

  Container bottomNewCommentButton(){
    return Container(
      child: RaisedButton(
        child: Text("Publish", style: TextStyle(fontSize: 20.0, color: Colors.white)),
        color: Colors.blue[300],
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (BuildContext context){
                return new AnimatedPadding(
                  padding: MediaQuery.of(context).viewInsets,
                  duration: const Duration(milliseconds: 100),
                  child: Container(
                    child: textField(),
                    padding: EdgeInsets.all(7),
                  ),
                );
              }
          );
        },
      ),
      height: 50,
    );
  }

  Row textField() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Expanded(
          child: new TextField(
            decoration: InputDecoration(
              hintText: 'Say something here...',
              border: null,
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue[300]),
              ),
            ),
            keyboardType: TextInputType.text,
            maxLength: 250,
            maxLines: 10,
          ),
        ),
        IconButton(
          icon: Icon(Icons.send),
          onPressed: () {
            Navigator.of(context).pop();
          },
        )
      ],
    );
  }

}
感谢大神的文章

作者：rtk
链接：https://juejin.im/post/5ce02760e51d45107d7cb846
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。