Skip to content

Instantly share code, notes, and snippets.

@JaveedIshaq
Last active January 22, 2021 03:22
Show Gist options
  • Save JaveedIshaq/621bb32ee4e13c08c7e08bf0e6e9c282 to your computer and use it in GitHub Desktop.
Save JaveedIshaq/621bb32ee4e13c08c7e08bf0e6e9c282 to your computer and use it in GitHub Desktop.
How to add a colored bottom border on a rounded corner Container in flutter?
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Padding(
padding: EdgeInsets.all(18.0),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)))),
child: Container(
height: 70.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.blueAccent,
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(0, 83, 79, 1), width: 7.0),
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: new Text("Your Text",
style: TextStyle(fontSize: 30.0, color: Colors.black)),
)),
),
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment