Flutter container gets disappear

Question

Don't know what I am missing here. Want to make the Container UI like the Material Filled Text Field. Just want to know whether we can use BorderSide and borderRadius together or they work separately. And using Container only How can I achieve this?

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            height: 50.0,
            width: 500.0,
            padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(width: 2.0, color: Color(0xFFFF7F7F7F)),
              ),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(2),
                topRight: Radius.circular(2),
              ),
              color: Color(0xFFBFBFBF),
            ),
            child: const Text('OK',
                textAlign: TextAlign.center,
                style: TextStyle(color: Color(0xFF000000))),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
  }
}

Answer 1

I think that flutter can't handle this configuration.

You are appling bottom border in the container, and also a border radius.

Read this post: A borderRadius can only be given for uniform borders

Also read this: Add border to a Container with borderRadius in Flutter

In the second post, you may find a way to achieve what you are looking for.