Skip to content

Commit fdd0f2c

Browse files
CoderJavaCoderJava
committed
Ubah metode untuk menampilkan gambar wavy
1 parent ac63d70 commit fdd0f2c

File tree

3 files changed

+70
-98
lines changed

3 files changed

+70
-98
lines changed

‎assets/images/image_dessert_edit.png

-1.25 MB
Binary file not shown.

‎assets/images/img_tree_beach.jpg

-103 KB
Loading

‎lib/main.dart

Lines changed: 70 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import 'dart:ui';
22

33
import 'package:flutter/material.dart';
4-
import 'dart:math' as math;
54

65
void main() => runApp(MyApp());
76

@@ -26,66 +25,44 @@ class MyHomePage extends StatelessWidget {
2625
height: double.infinity,
2726
child: Stack(
2827
children: <Widget>[
29-
_buildWidgetContent(heightScreen),
30-
Container(
31-
color: Colors.black.withOpacity(0.1),
32-
width: double.infinity,
33-
height: paddingTop + 36,
34-
child: BackdropFilter(
35-
filter: ImageFilter.blur(
36-
sigmaX: 5,
37-
sigmaY: 5,
28+
Column(
29+
children: <Widget>[
30+
Expanded(
31+
child: Stack(
32+
children: <Widget>[
33+
Image.asset(
34+
'assets/images/img_dessert.jpg',
35+
fit: BoxFit.cover,
36+
height: heightScreen / 2,
37+
),
38+
ContainerBlack(heightScreen: heightScreen),
39+
],
40+
),
3841
),
39-
),
40-
),
41-
],
42-
),
43-
),
44-
);
45-
}
46-
47-
Widget _buildWidgetContent(double heightScreen) {
48-
return ListView(
49-
padding: EdgeInsets.zero,
50-
children: <Widget>[
51-
Stack(
52-
children: <Widget>[
53-
Positioned(
54-
child: Padding(
55-
padding: const EdgeInsets.only(top: 570.0),
56-
child: Stack(
57-
children: <Widget>[
58-
Image.asset(
59-
'assets/images/img_polar_light.jpg',
60-
fit: BoxFit.cover,
61-
height: heightScreen / 2,
62-
),
63-
Container(
64-
color: Colors.black.withOpacity(0.5),
65-
height: heightScreen / 2,
66-
),
67-
],
42+
Expanded(
43+
child: Stack(
44+
children: <Widget>[
45+
Image.asset(
46+
'assets/images/img_polar_light.jpg',
47+
fit: BoxFit.cover,
48+
height: heightScreen / 2,
49+
),
50+
ContainerBlack(heightScreen: heightScreen),
51+
],
52+
),
6853
),
69-
),
54+
],
7055
),
71-
Positioned(
72-
child: Padding(
73-
padding: const EdgeInsets.only(top: 380),
74-
child: WavyImage('assets/images/img_dessert.jpg'),
56+
Align(
57+
alignment: Alignment.center,
58+
child: WavyImage(
59+
'assets/images/img_tree_beach.jpg',
7560
),
7661
),
77-
Positioned(
78-
child: Padding(
79-
padding: const EdgeInsets.only(top: 190.0),
80-
child: WavyImage('assets/images/img_polar_light.jpg'),
81-
),
82-
),
83-
Positioned(
84-
child: WavyImage('assets/images/img_dessert.jpg'),
85-
),
62+
8663
],
8764
),
88-
],
65+
),
8966
);
9067
}
9168
}
@@ -107,10 +84,7 @@ class WavyImage extends StatelessWidget {
10784
fit: BoxFit.cover,
10885
height: heightScreen / 2,
10986
),
110-
Container(
111-
color: Colors.black.withOpacity(0.5),
112-
height: heightScreen / 2,
113-
),
87+
ContainerBlack(heightScreen: heightScreen),
11488
],
11589
),
11690
clipper: WaveClipper(),
@@ -122,67 +96,48 @@ class WaveClipper extends CustomClipper<Path> {
12296
@override
12397
Path getClip(Size size) {
12498
Path path = Path();
125-
/*path.lineTo(0, size.height - 20);
126-
127-
double dxFirstControlPoint = size.width / 4;
128-
double dyFirstControlPoint = size.height;
129-
double dxFirstEndPoint = size.width / 2.25;
130-
double dyFirstEndpoint = size.height - 30;
131-
print('FirstControlPoint dx: $dxFirstControlPoint & dy: $dyFirstControlPoint');
132-
print('FirstEndPoint dx: $dxFirstEndPoint & dy: $dyFirstEndpoint');
133-
var firstControlPoint = Offset(dxFirstControlPoint, dyFirstControlPoint);
134-
var firstEndPoint = Offset(dxFirstEndPoint, dyFirstEndpoint);
99+
100+
path.lineTo(0, size.height - 200);
101+
var firstControlPoint = Offset(0, size.height - 160);
102+
var firstEndPoint = Offset(30, size.height - 150);
135103
path.quadraticBezierTo(
136104
firstControlPoint.dx,
137105
firstControlPoint.dy,
138106
firstEndPoint.dx,
139107
firstEndPoint.dy,
140108
);
141109

142-
double dxSecondControlPoint = size.width - (size.width / 3.25);
143-
double dySecondControlPoint = size.height - 65;
144-
double dxSecondEndPoint = size.width;
145-
double dySecondEndPoint = size.height - 40;
146-
print('SecondControlPoint dx: $dxSecondControlPoint & dy: $dySecondControlPoint');
147-
print('SecondEndPoint dx: $dxSecondEndPoint & dy: $dySecondEndPoint');
148-
var secondControlPoint = Offset(dxSecondControlPoint, dySecondControlPoint);
149-
var secondEndPoint = Offset(dxSecondEndPoint, dySecondEndPoint);
110+
path.lineTo(size.width - 30, size.height - 50);
111+
var secondControlPoint = Offset(size.width, size.height - 40);
112+
var secondEndPoint = Offset(size.width, size.height);
150113
path.quadraticBezierTo(
151114
secondControlPoint.dx,
152115
secondControlPoint.dy,
153116
secondEndPoint.dx,
154117
secondEndPoint.dy,
155118
);
156119

157-
path.lineTo(size.width, size.height - 40);
158-
path.lineTo(size.width, 0);*/
159-
160-
// benar
161-
path.lineTo(0, size.height - 140);
162-
var firstControlPoint = Offset(0, size.height - 100);
163-
var firstEndPoint = Offset(30, size.height - 90);
120+
path.lineTo(size.width, 200);
121+
var thirdControlPoint = Offset(size.width, 140);
122+
var thirdEndPoint = Offset(size.width - 30, 150);
164123
path.quadraticBezierTo(
165-
firstControlPoint.dx,
166-
firstControlPoint.dy,
167-
firstEndPoint.dx,
168-
firstEndPoint.dy,
124+
thirdControlPoint.dx,
125+
thirdControlPoint.dy,
126+
thirdEndPoint.dx,
127+
thirdControlPoint.dy,
169128
);
170129

171-
path.lineTo(size.width - 30, size.height - 50);
172-
var secondControlPoint = Offset(size.width, size.height - 40);
173-
var secondEndPoint = Offset(size.width, size.height);
130+
path.lineTo(30, 50);
131+
var fourthControlPoint = Offset(0, 40);
132+
var fourthEndPoint = Offset(0, 0);
174133
path.quadraticBezierTo(
175-
secondControlPoint.dx,
176-
secondControlPoint.dy,
177-
secondEndPoint.dx,
178-
secondEndPoint.dy,
134+
fourthControlPoint.dx,
135+
fourthControlPoint.dy,
136+
fourthEndPoint.dx,
137+
fourthEndPoint.dy,
179138
);
180-
// benar
181139

182-
path.lineTo(size.width, size.height);
183-
path.lineTo(size.width, 0);
184140
path.close();
185-
186141
return path;
187142
}
188143

@@ -191,3 +146,20 @@ class WaveClipper extends CustomClipper<Path> {
191146
return true;
192147
}
193148
}
149+
150+
class ContainerBlack extends StatelessWidget {
151+
const ContainerBlack({
152+
Key key,
153+
@required this.heightScreen,
154+
}) : super(key: key);
155+
156+
final double heightScreen;
157+
158+
@override
159+
Widget build(BuildContext context) {
160+
return Container(
161+
height: heightScreen / 2,
162+
color: Colors.black.withOpacity(0.5),
163+
);
164+
}
165+
}

0 commit comments

Comments
 (0)