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);
}
}
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.