我想删除AppBar下面的蓝线.

enter image description here

What have I tried already?

1.更改appBar backgroundColor: kTextfieldBorderColor,的 colored颜色

2.我已将标高设置为0elevation: 0

3.回顾这个类似的问题here,但它没有给出任何令人满意的答案,而只是暂时的解决方案.edit:我try 了这里提到的解决方案,但将Scaffold和appBar都设置为透明并不起作用

enter image description here

4.我还try 在appBar中添加toolbarHeight: kToolbarHeight + 1.25,,但这甚至都不起作用.

下面我添加了完整的脚手架代码,让你知道为什么它会导致这个问题.

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: kBackgroundColor,
  appBar: AppBar(
    backgroundColor: kTextfieldBorderColor,
    elevation: 0,
    // leading: null,
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            //Implement logout functionality
            _auth.signOut();
            Navigator.pop(context);
          }),
    ],
    title: Text('⚡️Chat'),
  ),
  body: SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          decoration: kMessageContainerDecoration,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: TextField(
                  onChanged: (value) {
                    //Do something with the user input.
                  },
                  decoration: kMessageTextFieldDecoration,
                  cursorColor: kTextfieldBorderColor,
                ),
              ),
              TextButton(
                onPressed: () {
                  //Implement send functionality.
                },
                child: const Text(
                  'Send',
                  style: kSendButtonTextStyle,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

用于 colored颜色 、文本字段等的代码为constants

const kBackgroundColor = Color(0xffEDD9C8);
const kRoundedButtonColor = Color(0xffC68E5D);
const kTextfieldBorderColor = Color(0xffC68E5D);
const kMessageTextFieldDecoration = InputDecoration(
  contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
  hintText: 'Type your message here...',
  border: InputBorder.none,
);

const kMessageContainerDecoration = BoxDecoration(
  border: Border(
    top: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
  ),
);

推荐答案

问题出在这些代码行上.

const kMessageContainerDecoration = BoxDecoration(
  border: Border(
    top: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
  ),
);

Container(
              decoration: kMessageContainerDecoration,
    ...

它是容器的边框 colored颜色 . 您可以将其更改为

const kMessageContainerDecoration = BoxDecoration(
  border: Border(
    top: BorderSide(color: Colors.transparent, width: 2.0),
  ),
);

// Or whatever you find it convenient.

Flutter相关问答推荐

类型flatter doctor get zsh:未找到命令:macO中flatter

Android NFC未收到空的NFC标签

Flutter 翼doctor 显示的错误,我似乎不能修复.问题:系统32、Android工具链、Windows 10 SDK

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

无法构建AndroidBundle 包或iOS等

Riverpod Provider.family 和 HookConsumerWidget 不刷新 UI

Flutter 需要 Xcode 14 或更高版本

网页浏览器不支持鼠标滚动的行项目

PreferredSizeWidget类不能用作混合,因为它既不是混合类也不是混合

Elevated 和 Outlined 按钮之间的动画

Flutter 分析发现 Gitlab CI/CD 管道中的问题,但它在本地没有

Flutter可滚动定位列表支持rtl方向吗?

你如何在 Flutter 中组合两个数组?

Android: 从 URI 获取音频元数据

Flutter Websockets MacOS:相同的代码在调试模式下有效,但在发布模式下无效:(操作系统错误:提供了 node 名或服务名..)

我怎样才能一次只选中一个复选框?

在 Flame Forge2d 中射击子弹

如何使用列Flutter 中文本占用的空间来控制svg宽度

在 Flutter 中将提取的 Listview.builder 与两个列表一起使用

在 Flutter Bloc 中具有称为 status 的属性的一种状态或不同的状态,哪个更可取?