Flutter: Borders Disappear When Their Colour Changes

Question

Problem:

I have encountered an interesting problem that I cannot solve. The borders of the container disappear when I change their colour.

Code:

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,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I have labelled the areas of interest with //TODO:

I cannot even change their colours to white or black without them disappearing. I have spent about an hour trying to resolve this issue on my own with internet searches, with no luck.

Question:

Why can I have one colour but not another?

Expectation:

To change the top and left borders to black and the bottom and right to white.

Answer 1

In flutter "A borderRadius can only be given for uniform borders." so if you remove radius it will work. But if you want to keep radius it is not easy to do with just one line, there is some samples in this question: