Skip to content

Commit e38d372

Browse files
CoderJavaCoderJava
committed
Buat avatar dan custom clipper AppBar
1 parent de2d20c commit e38d372

File tree

4 files changed

+154
-7
lines changed

4 files changed

+154
-7
lines changed

‎assets/images/img_avatar.jpg‎

85.3 KB
Loading

‎lib/clipper/wavy_app_bar_clipper.dart‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_screenutil/flutter_screenutil.dart';
3+
4+
class WavyAppBarClipper extends CustomClipper<Path> {
5+
@override
6+
Path getClip(Size size) {
7+
Path path = Path();
8+
path.lineTo(0, 0);
9+
path.lineTo(0, size.height);
10+
double middleWidth = size.width / 2;
11+
12+
path.lineTo(middleWidth - 64.w - 30.w - 10.w, size.height);
13+
path.lineTo(middleWidth - 64.w - 30.w, size.height - 6.w);
14+
var middleControlPoint = Offset(middleWidth, size.height - 135.w);
15+
var middleEndPoint = Offset(middleWidth + 64.w + 30.w, size.height - 6.w);
16+
path.quadraticBezierTo(
17+
middleControlPoint.dx,
18+
middleControlPoint.dy,
19+
middleEndPoint.dx,
20+
middleEndPoint.dy,
21+
);
22+
path.lineTo(middleWidth + 64.w + 30.w, size.height - 6.w);
23+
path.lineTo(middleWidth + 64.w + 30.w + 10.w, size.height);
24+
25+
path.lineTo(size.width, size.height);
26+
path.lineTo(size.width, 0);
27+
path.close();
28+
return path;
29+
}
30+
31+
@override
32+
bool shouldReclip(CustomClipper<Path> oldClipper) {
33+
return true;
34+
}
35+
}

‎lib/main.dart‎

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

33
import 'package:flutter/material.dart';
4+
import 'package:flutter_meditation_app/wavy/wavy_app_bar.dart';
45
import 'package:flutter_meditation_app/wavy/wavy_bottom_navigation_bar.dart';
56
import 'package:flutter_meditation_app/wavy/wavy_image.dart';
67
import 'package:flutter_meditation_app/widgets/container_black.dart';
@@ -12,6 +13,7 @@ class MyApp extends StatelessWidget {
1213
@override
1314
Widget build(BuildContext context) {
1415
return MaterialApp(
16+
debugShowCheckedModeBanner: false,
1517
home: MyHomePage(),
1618
);
1719
}
@@ -98,6 +100,96 @@ class MyHomePage extends StatelessWidget {
98100
),
99101
),
100102
),
103+
Align(
104+
alignment: Alignment.topCenter,
105+
child: WavyAppBar(),
106+
),
107+
Align(
108+
alignment: Alignment.topCenter,
109+
child: Padding(
110+
padding: EdgeInsets.only(top: ScreenUtil.statusBarHeight + 50.w),
111+
child: Container(
112+
width: 128.w,
113+
height: 128.w,
114+
decoration: BoxDecoration(
115+
shape: BoxShape.circle,
116+
border: Border.all(
117+
color: Colors.white,
118+
width: 2,
119+
),
120+
image: DecorationImage(
121+
image: AssetImage(
122+
'assets/images/img_avatar.jpg',
123+
),
124+
fit: BoxFit.cover,
125+
),
126+
),
127+
),
128+
),
129+
),
130+
Align(
131+
alignment: Alignment.topCenter,
132+
child: Padding(
133+
padding: EdgeInsets.only(top: ScreenUtil.statusBarHeight),
134+
child: Container(
135+
width: double.infinity,
136+
height: 100.w,
137+
child: Row(
138+
crossAxisAlignment: CrossAxisAlignment.center,
139+
mainAxisAlignment: MainAxisAlignment.spaceAround,
140+
children: <Widget>[
141+
Icon(
142+
Icons.wifi_tethering,
143+
color: Colors.white,
144+
size: 48.w,
145+
),
146+
Container(),
147+
Stack(
148+
children: [
149+
Align(
150+
alignment: Alignment.center,
151+
child: Icon(
152+
Icons.notifications,
153+
color: Colors.white,
154+
size: 48.w,
155+
),
156+
),
157+
Align(
158+
alignment: Alignment.center,
159+
child: Padding(
160+
padding: EdgeInsets.only(
161+
left: 24.w,
162+
bottom: 28.w,
163+
),
164+
child: Container(
165+
width: 32.w,
166+
height: 32.w,
167+
decoration: BoxDecoration(
168+
color: Colors.black,
169+
shape: BoxShape.circle,
170+
),
171+
child: Center(
172+
child: Padding(
173+
padding: EdgeInsets.all(2),
174+
child: Text(
175+
'1',
176+
style: TextStyle(
177+
color: Colors.white,
178+
fontSize: 20.sp,
179+
),
180+
),
181+
),
182+
),
183+
),
184+
),
185+
),
186+
],
187+
),
188+
],
189+
),
190+
),
191+
),
192+
),
101193
],
102194
),
103195
),
@@ -139,12 +231,15 @@ class MyHomePage extends StatelessWidget {
139231
child: Column(
140232
children: <Widget>[
141233
Expanded(
142-
child: Column(
143-
mainAxisAlignment: MainAxisAlignment.center,
144-
children: <Widget>[
145-
_buildWidgetTitle('Meditation'),
146-
_buildWidgetSubtitle('Breathe, Sense, Feel'),
147-
],
234+
child: Padding(
235+
padding: EdgeInsets.only(top: ScreenUtil.statusBarHeight + 40.w),
236+
child: Column(
237+
mainAxisAlignment: MainAxisAlignment.center,
238+
children: <Widget>[
239+
_buildWidgetTitle('Meditation'),
240+
_buildWidgetSubtitle('Breathe, Sense, Feel'),
241+
],
242+
),
148243
),
149244
),
150245
Expanded(
@@ -158,7 +253,7 @@ class MyHomePage extends StatelessWidget {
158253
),
159254
Expanded(
160255
child: Padding(
161-
padding: EdgeInsets.only(bottom: 200.w),
256+
padding: EdgeInsets.only(bottom: ScreenUtil.bottomBarHeight + 200.w),
162257
child: Column(
163258
mainAxisAlignment: MainAxisAlignment.center,
164259
children: <Widget>[

‎lib/wavy/wavy_app_bar.dart‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_meditation_app/clipper/wavy_app_bar_clipper.dart';
3+
import 'package:flutter_screenutil/flutter_screenutil.dart';
4+
5+
class WavyAppBar extends StatelessWidget {
6+
@override
7+
Widget build(BuildContext context) {
8+
ScreenUtil.init(context);
9+
return ClipPath(
10+
child: Container(
11+
color: Color(0xFFC3B7AB),
12+
height: ScreenUtil.statusBarHeight + 100.w,
13+
),
14+
clipper: WavyAppBarClipper(),
15+
);
16+
}
17+
}

0 commit comments

Comments
 (0)