borderRadius can be specified only for uniform borders, that is, borders that have the same width and color for each side.
You can achieve a similar effect, by wrapping the TextField into a Container and making use of the BoxShadow property:
Follows a full snippet of the screenshotted example:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 200,
decoration: BoxDecoration(
//borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(2, 0),
color: Colors.grey,
spreadRadius: 0,
blurRadius: 2,
),
],
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: TextField(
textAlign: TextAlign.center,
decoration: new InputDecoration(
border: InputBorder.none,
hintText: 'User Name',
hintStyle: new TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold),
suffixIcon: const Icon(
Icons.person,
size: 30.0,
color: Colors.grey,
),
),
),
),
),
);
//
}
}
A second, hackier, work-around, would be to use a Stack and a Container positioned to the far left to hide the left border. Although, in this case, it might be difficult to use a Colors.transparent background.
Follows the full snippet:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 200,
height: 50,
child: Stack(
overflow: Overflow.visible,
children: [
TextField(
textAlign: TextAlign.center,
decoration: new InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 1),
borderRadius: BorderRadius.circular(20),
),
hintText: 'User Name',
hintStyle: new TextStyle(
color: Colors.grey, fontWeight: FontWeight.bold),
suffixIcon: const Icon(
Icons.person,
size: 30.0,
color: Colors.grey,
),
),
),
Positioned(
left: 0,
bottom: 0,
child: Container(
width: 20,
height: 50,
color: Theme.of(context).scaffoldBackgroundColor,
),
),
],
),
),
),
);
//
}
}
