Skip to content

Instantly share code, notes, and snippets.

@eric-taix
Last active November 10, 2019 13:25
Show Gist options
  • Save eric-taix/ca274fa4f7c08982e9b02507a45f9a3c to your computer and use it in GitHub Desktop.
Save eric-taix/ca274fa4f7c08982e9b02507a45f9a3c to your computer and use it in GitHub Desktop.
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:flutter_web/material.dart';
main() async {
await ui.webOnlyInitializePlatform();
runApp(
MaterialApp(
home: Scaffold(body: ComplexLayoutApp()),
),
);
}
class ComplexLayoutApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(children: [
Expanded(child: Part1()),
Expanded(child: Part2()),
]);
}
}
class Part1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(fit: StackFit.expand, children: [
Container(
color: Colors.black87,
),
ClipPath(
clipper: Area1Customlipper(),
child: Image.network(
'https://picsum.photos/seed/area1/400/100',
fit: BoxFit.fill,
)),
ClipPath(
clipper: Area2Customlipper(),
child: Image.network(
'https://picsum.photos/400/300',
fit: BoxFit.fill,
))
]);
}
}
class Part2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: Text("Part II")),
],
);
}
}
const double offset = 0.34;
class Area1Customlipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(4*size.width/8, 0);
path.lineTo((4-offset)*size.width/8, (4)*size.height/8);
path.lineTo((4)*size.width/8, (4)*size.height/8);
path.lineTo(size.width/2, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
class Area2Customlipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(4*size.width/8, 0);
path.lineTo((4)*size.width/8, (4-offset)*size.height/8);
path.lineTo((4+offset)*size.width/8, (4 - offset)*size.height/8);
path.lineTo(size.width/2, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment