Skip to content

Instantly share code, notes, and snippets.

@stegrams
Last active May 25, 2020 00:15
Show Gist options
  • Save stegrams/72724b12c7d3c0ecde9bb847911867a3 to your computer and use it in GitHub Desktop.
Save stegrams/72724b12c7d3c0ecde9bb847911867a3 to your computer and use it in GitHub Desktop.
A small hack to apply circular radius to an uniform border.
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: ThirdScreen(),
),
),
);
}
}
class ThirdScreen extends StatefulWidget {
@override
_ThirdScreenState createState() => _ThirdScreenState();
}
class _ThirdScreenState extends State<ThirdScreen> {
TextEditingController _controller = new TextEditingController(text: "0");
@override
Widget build(BuildContext context) {
double scale = 1;
Radius radius = Radius.circular(5.0 * scale);
Color inputColor = darkBlue;
Color inputBorderColor = Colors.grey;
Color editIconColor = Colors.orangeAccent;
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 24 * scale,
width: 50 * scale,
decoration: BoxDecoration(
color: inputBorderColor,
borderRadius: BorderRadius.horizontal(left: radius),
),
child: Container(
margin: EdgeInsets.fromLTRB(scale, scale, 0, scale),
decoration: BoxDecoration(
color: inputColor,
borderRadius: BorderRadius.horizontal(left: radius),
),
child: Row(
children: <Widget>[
Flexible(
child: TextFormField(
controller: _controller,
style: TextStyle(fontSize: 14 * scale),
textAlign: TextAlign.right,
maxLength: 3,
maxLines: 1,
keyboardType: TextInputType.number,
decoration: InputDecoration(
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
counterText: '',
),
),
),
Text(
' % ',
style: TextStyle(fontSize: 14 * scale),
),
],
),
),
),
Container(
width: 24 * scale,
height: 24 * scale,
decoration: BoxDecoration(
border: Border.all(color: editIconColor, width: scale),
borderRadius: BorderRadius.horizontal(right: radius),
),
child: IconButton(
onPressed: null,
iconSize: 22 * scale,
padding: EdgeInsets.all(0),
icon: Icon(
Icons.edit,
color: editIconColor,
),
),
)
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment