Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adding image to the curved canvas in dashboard
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyPage(),
);
}
}
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipPath(
clipper: MyClipper(),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
height: 300,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFF3383CD),
Color(0xFF11249F),
],
),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"DashBoard",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
Icon(
Icons.menu,
color: Colors.white,
),
],
),
),
Flexible(
child: Align(
alignment: Alignment.topLeft,
child: Image(
image: AssetImage('assets/bird.png'),
),
),
),
],
),
),
)
],
),
));
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 80);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height - 80);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment