Quiero hacer lo siguiente en flutter:
Pero no consigo entender como funciona ClipPath, ya leí todo el material de flutter y vi vídeos en Youtube.
esta es mi clase:
class MyClipper extends CustomClipper<Path> {
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 40);
path.quadraticBezierTo(size.width/4, size.height, size.width/2, size.height);
path.quadraticBezierTo(size.width-(size.width/4), size.height, size.width, size.height-40);
path.lineTo(size.width, 0);
path.close();
return path;
}
bool shouldReclip(CustomClipper<Path> oldClipper) {
return null;
}
}
Si hay alguna otra forma de lograr este diseño se agradece info.
PD: Otra forma puede ser hacer una imagen jpg en Photoshop?
Por ejemplo si quiero que es ves del efecto bottom lo haga en top tambien como deberia de hacer?
class MyClipper extends CustomClipper<Path> {
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height - 20);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
var secondControlPoint =
Offset(size.width - (size.width / 3.25), size.height - 65);
var secondEndPoint = Offset(size.width, size.height - 40);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, size.height - 40);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Este es el resultado final: (primer foto)
CODIGO:
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
//BLOQUEAR ROTRACION DE PANTALLA
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Welcome to Flutter',
home: Scaffold(
body: HomePageBody(),
));
}
}
class HomePageBody extends StatefulWidget {
@override
_HomePageBodyState createState() => new _HomePageBodyState();
}
class _HomePageBodyState extends State<HomePageBody> {
@override
void initState() {
//SPLASH SCREEN
super.initState();
Future.delayed(Duration(seconds: 30), //3
() {
Route route = MaterialPageRoute(builder: (context) => HomePage());
Navigator.pushReplacement(context, route);
});
}
@override
Widget build(BuildContext context) {
//PLASH SCREEN
return new Scaffold(
//appBar: new AppBar(),
body: Stack(
children: <Widget>[
Container(
height: 100.0,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(
top: 80,
),
decoration: BoxDecoration(
color: Colors.blueAccent, //Tema.Colors.appBarGradientEnd,
),
child: Center(
child: Text(
"¡Bienvenidos!",
style: TextStyle(
color: Colors.white,
fontFamily: 'Poppins',
letterSpacing: 0.8,
fontSize: 25.0,
),
),
),
),
Container(
margin: EdgeInsets.only(
top: 180
),
child: Image.asset(
'fotos/fondo.jpg',
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
alignment: Alignment.bottomCenter,
),
),
ClipPath(
clipper: MyClipper(),
child: Container(
margin: EdgeInsets.only(
top: 500.0,
),
width: double.infinity,
height: 60.0,
color: Colors.blueAccent,
)),
],
),
);
}
}
class MyClipper extends CustomClipper<Path> {
Path getClip(Size size) {
var path = Path();
path.lineTo(0, size.height - 20);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstEndPoint = Offset(size.width / 2.25, size.height - 20.0);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
var secondControlPoint = Offset(size.width - (size.width / 3.25), size.height - 55);
var secondEndPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, 0);
path.close();
return path;
}
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}