Flutter 颤振：边框颜色改变时消失

问题：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff31353B),
        body: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 50.0,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      //style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    top: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    right: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    bottom: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                  ),
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(30.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: Text(
                        "BUTTON",
                        style: TextStyle(
                          color: Color(0xFFF05A22),
                          fontFamily: 'Montserrat',
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我遇到了一个我无法解决的有趣问题。当我改变容器的颜色时，容器的边框消失了

代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff31353B),
        body: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 50.0,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      //style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    top: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    right: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    bottom: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                  ),
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(30.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: Text(
                        "BUTTON",
                        style: TextStyle(
                          color: Color(0xFFF05A22),
                          fontFamily: 'Montserrat',
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
背景颜色：颜色（0xff31353B），
正文：Home（），
),
);
}
}
类Home扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回中心(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
容器(
身高：50.0，
儿童：手势检测器(
onTap:（）{}，
子：容器(
装饰：盒子装饰(
边界：边界(
左：边界边(
//托多：问题出在这里。
颜色：颜色（0xFFF05A22），
//样式：BorderStyle.solid，
宽度：3.0，
),
顶部：边界侧(
//托多：问题出在这里。
颜色：颜色（0xFFF05A22），
样式：BorderStyle.solid，
宽度：3.0，
),
右：边界边(
//托多：问题出在这里。
颜色：颜色（0xFFF05A22），
样式：BorderStyle.solid，
宽度：3.0，
),
底部：边界侧(
//托多：问题出在这里。
颜色：颜色（0xFFF05A22），
样式：BorderStyle.solid，
宽度：3.0，
),
),
颜色：颜色。绿色，
边界半径：边界半径。圆形（30.0），
),
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
居中(
子：文本(
“按钮”，
样式：TextStyle(
颜色：颜色（0xFFF05A22），
fontFamily：“蒙特塞拉特”，
尺寸：16，
fontWeight:fontWeight.w600，
字母间距：1，
),
),
),
],
),
),
),
),
],
),
);
}
}

我已经用//TODO:标记了感兴趣的领域

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff31353B),
        body: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 50.0,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      //style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    top: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    right: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    bottom: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                  ),
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(30.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: Text(
                        "BUTTON",
                        style: TextStyle(
                          color: Color(0xFFF05A22),
                          fontFamily: 'Montserrat',
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我甚至不能把它们的颜色改成白色或黑色而不让它们消失。我花了大约一个小时试图通过互联网搜索解决这个问题，但运气不佳

问题：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff31353B),
        body: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 50.0,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      //style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    top: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    right: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    bottom: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                  ),
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(30.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: Text(
                        "BUTTON",
                        style: TextStyle(
                          color: Color(0xFFF05A22),
                          fontFamily: 'Montserrat',
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

为什么我可以有一种颜色而不能有另一种

期望值：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xff31353B),
        body: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 50.0,
            child: GestureDetector(
              onTap: () {},
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    left: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      //style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    top: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    right: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                    bottom: BorderSide(
                      //TODO: HERE IS THE PROBLEM.
                      color: Color(0xFFF05A22),
                      style: BorderStyle.solid,
                      width: 3.0,
                    ),
                  ),
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(30.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: Text(
                        "BUTTON",
                        style: TextStyle(
                          color: Color(0xFFF05A22),
                          fontFamily: 'Montserrat',
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

将顶部和左侧边框更改为黑色，底部和右侧边框更改为白色。

在“颤振”中，“只能为统一边框指定边框半径”。因此，如果删除半径，它将起作用。但如果您想保持半径，仅使用一条线并不容易，这里有一些示例：

在颤振中，您不能在边框中使用两种不同的颜色，也不能使用边框半径