Posted By
Bajarangi soft ,
Posted On 23-09-2020
In this article you are going to learn how to draw custom shapes in your flutter application. This will make your app more beautiful.
You Can Add Curved Background Shape Code:
void paint(Canvas canvas, Size size) {
Path path = Path();
Paint paint = Paint();
path.lineTo(0, size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.10, size.height * 0.70, size.width * 0.17,
size.height * 0.90);
path.quadraticBezierTo(
size.width * 0.20, size.height, size.width * 0.25, size.height * 0.90);
path.quadraticBezierTo(
size.width * 0.40, size.height * 0.40, size.width * 0.50,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.60, size.height * 0.85, size.width * 0.65,
size.height * 0.65);
path.quadraticBezierTo(
size.width * 0.70, size.height * 0.90, size.width, 0);
path.close();
paint.color = colorThree;
canvas.drawPath(path, paint);
path = Path();
path.lineTo(0, size.height * 0.50);
path.quadraticBezierTo(
size.width * 0.20, size.height * 0.80, size.width * 0.15,
size.height * 0.60);
path.quadraticBezierTo(
size.width * 0.20, size.height * 0.45, size.width * 0.27,
size.height * 0.60);
path.quadraticBezierTo(
size.width * 0.45, size.height, size.width * 0.50, size.height * 0.80);
path.quadraticBezierTo(
size.width * 0.55, size.height * 0.45, size.width * 0.75,
size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.85, size.height * 0.93, size.width, size.height * 0.60);
path.lineTo(size.width, 0);
path.close();
paint.color = colorTwo;
canvas.drawPath(path, paint);
path = Path();
path.lineTo(0, size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.10, size.height * 0.55, size.width * 0.22,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.30, size.height * 0.90, size.width * 0.40,
size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.52, size.height * 0.50, size.width * 0.65,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.75, size.height * 0.85, size.width, size.height * 0.60);
path.lineTo(size.width, 0);
path.close();
paint.color = colorOne;
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
Color colorOne = Colors.deepPurple[400];
Color colorTwo = Colors.deepPurple[200];
Color colorThree = Colors.deepPurple[100];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Curved Path',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Curved Design'),
backgroundColor: Colors.deepPurple[400],
),
body: Container(
child: TopBar(),
),
);
}
}
class TopBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomPaint(
child: Container(
height: 300.0,
),
painter: CurvePainter(),
);
}
}
class CurvePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Path path = Path();
Paint paint = Paint();
path.lineTo(0, size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.10, size.height * 0.70, size.width * 0.17,
size.height * 0.90);
path.quadraticBezierTo(
size.width * 0.20, size.height, size.width * 0.25, size.height * 0.90);
path.quadraticBezierTo(
size.width * 0.40, size.height * 0.40, size.width * 0.50,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.60, size.height * 0.85, size.width * 0.65,
size.height * 0.65);
path.quadraticBezierTo(
size.width * 0.70, size.height * 0.90, size.width, 0);
path.close();
paint.color = colorThree;
canvas.drawPath(path, paint);
path = Path();
path.lineTo(0, size.height * 0.50);
path.quadraticBezierTo(
size.width * 0.20, size.height * 0.80, size.width * 0.15,
size.height * 0.60);
path.quadraticBezierTo(
size.width * 0.20, size.height * 0.45, size.width * 0.27,
size.height * 0.60);
path.quadraticBezierTo(
size.width * 0.45, size.height, size.width * 0.50, size.height * 0.80);
path.quadraticBezierTo(
size.width * 0.55, size.height * 0.45, size.width * 0.75,
size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.85, size.height * 0.93, size.width, size.height * 0.60);
path.lineTo(size.width, 0);
path.close();
paint.color = colorTwo;
canvas.drawPath(path, paint);
path = Path();
path.lineTo(0, size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.10, size.height * 0.55, size.width * 0.22,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.30, size.height * 0.90, size.width * 0.40,
size.height * 0.75);
path.quadraticBezierTo(
size.width * 0.52, size.height * 0.50, size.width * 0.65,
size.height * 0.70);
path.quadraticBezierTo(
size.width * 0.75, size.height * 0.85, size.width, size.height * 0.60);
path.lineTo(size.width, 0);
path.close();
paint.color = colorOne;
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
}