Skip to content

Commit 9545e76

Browse files
therajanmauryatherajanmaurya
committed
Feat: Add Wave AppBar Widget
1 parent f22b70e commit 9545e76

File tree

4 files changed

+180
-80
lines changed

4 files changed

+180
-80
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# wave_appbar
1+
# Wave-AppBar
22

33
A Wave-AppBar Example
44

‎lib/main.dart

+171-79
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,203 @@
11
import 'package:flutter/material.dart';
2+
import 'package:wave/config.dart';
3+
import 'package:wave/wave.dart';
24

35
void main() => runApp(MyApp());
46

57
class MyApp extends StatelessWidget {
6-
// This widget is the root of your application.
78
@override
89
Widget build(BuildContext context) {
910
return MaterialApp(
10-
title: 'Flutter Demo',
11+
title: 'Wave AppBar',
1112
theme: ThemeData(
12-
// This is the theme of your application.
13-
//
14-
// Try running your application with "flutter run". You'll see the
15-
// application has a blue toolbar. Then, without quitting the app, try
16-
// changing the primarySwatch below to Colors.green and then invoke
17-
// "hot reload" (press "r" in the console where you ran "flutter run",
18-
// or simply save your changes to "hot reload" in a Flutter IDE).
19-
// Notice that the counter didn't reset back to zero; the application
20-
// is not restarted.
2113
primarySwatch: Colors.blue,
2214
),
23-
home: MyHomePage(title: 'Flutter Demo Home Page'),
15+
home: AppBarHomePage(title: 'Wave AppBar'),
2416
);
2517
}
2618
}
2719

28-
class MyHomePage extends StatefulWidget {
29-
MyHomePage({Key key, this.title}) : super(key: key);
30-
31-
// This widget is the home page of your application. It is stateful, meaning
32-
// that it has a State object (defined below) that contains fields that affect
33-
// how it looks.
34-
35-
// This class is the configuration for the state. It holds the values (in this
36-
// case the title) provided by the parent (in this case the App widget) and
37-
// used by the build method of the State. Fields in a Widget subclass are
38-
// always marked "final".
39-
20+
class AppBarHomePage extends StatefulWidget {
21+
AppBarHomePage({Key key, this.title}) : super(key: key);
4022
final String title;
4123

4224
@override
43-
_MyHomePageState createState() => _MyHomePageState();
25+
_AppBarHomePageState createState() => _AppBarHomePageState();
4426
}
4527

46-
class _MyHomePageState extends State<MyHomePage> {
47-
int _counter = 0;
48-
49-
void _incrementCounter() {
50-
setState(() {
51-
// This call to setState tells the Flutter framework that something has
52-
// changed in this State, which causes it to rerun the build method below
53-
// so that the display can reflect the updated values. If we changed
54-
// _counter without calling setState(), then the build method would not be
55-
// called again, and so nothing would appear to happen.
56-
_counter++;
57-
});
28+
class _AppBarHomePageState extends State<AppBarHomePage> {
29+
static IconData backIcon(BuildContext context) {
30+
switch (Theme.of(context).platform) {
31+
case TargetPlatform.android:
32+
case TargetPlatform.fuchsia:
33+
return Icons.arrow_back;
34+
case TargetPlatform.iOS:
35+
return Icons.arrow_back_ios;
36+
}
37+
assert(false);
38+
return null;
5839
}
5940

6041
@override
6142
Widget build(BuildContext context) {
62-
// This method is rerun every time setState is called, for instance as done
63-
// by the _incrementCounter method above.
64-
//
65-
// The Flutter framework has been optimized to make rerunning build methods
66-
// fast, so that you can just rebuild anything that needs updating rather
67-
// than having to individually change instances of widgets.
6843
return Scaffold(
69-
appBar: AppBar(
70-
// Here we take the value from the MyHomePage object that was created by
71-
// the App.build method, and use it to set our appbar title.
72-
title: Text(widget.title),
73-
),
74-
body: Center(
75-
// Center is a layout widget. It takes a single child and positions it
76-
// in the middle of the parent.
77-
child: Column(
78-
// Column is also layout widget. It takes a list of children and
79-
// arranges them vertically. By default, it sizes itself to fit its
80-
// children horizontally, and tries to be as tall as its parent.
81-
//
82-
// Invoke "debug painting" (press "p" in the console, choose the
83-
// "Toggle Debug Paint" action from the Flutter Inspector in Android
84-
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
85-
// to see the wireframe for each widget.
86-
//
87-
// Column has various properties to control how it sizes itself and
88-
// how it positions its children. Here we use mainAxisAlignment to
89-
// center the children vertically; the main axis here is the vertical
90-
// axis because Columns are vertical (the cross axis would be
91-
// horizontal).
92-
mainAxisAlignment: MainAxisAlignment.center,
93-
children: <Widget>[
94-
Text(
95-
'You have pushed the button this many times:',
44+
backgroundColor: Theme.of(context).primaryColor,
45+
primary: false,
46+
appBar: PreferredSize(
47+
preferredSize: Size(null, 100),
48+
child: SafeArea(
49+
child: Container(
50+
color: Theme.of(context).primaryColor,
51+
width: MediaQuery.of(context).size.width,
52+
// Set Appbar wave height
53+
child: Container(
54+
height: 80,
55+
color: Theme.of(context).scaffoldBackgroundColor,
56+
child: Container(
57+
color: Colors.white,
58+
child: Stack(
59+
children: <Widget>[
60+
RotatedBox(
61+
quarterTurns: 2,
62+
child: WaveWidget(
63+
config: CustomConfig(
64+
colors: [Theme.of(context).primaryColor],
65+
durations: [22000],
66+
heightPercentages: [-0.1],
67+
),
68+
size: Size(double.infinity, double.infinity),
69+
waveAmplitude: 1,
70+
)),
71+
Row(
72+
mainAxisAlignment: MainAxisAlignment.start,
73+
crossAxisAlignment: CrossAxisAlignment.center,
74+
children: [
75+
Builder(
76+
builder: (context) => IconButton(
77+
icon: new Icon(backIcon(context), color: Colors.white),
78+
onPressed: () => print("It's Back Button"),
79+
),
80+
),
81+
Padding(
82+
padding: EdgeInsets.only(left: 15),
83+
child: Text(
84+
widget.title,
85+
style: TextStyle(fontSize: 20, color: Colors.white),
86+
)),
87+
],
88+
),
89+
Positioned(
90+
top: 6.0,
91+
right: 6.0,
92+
child: Theme(
93+
data: Theme.of(context).copyWith(
94+
cardColor: Theme.of(context).primaryColor,
95+
),
96+
child: PopupMenuButton(
97+
elevation: 4.0,
98+
initialValue: activePopMenu,
99+
onSelected: (value) {},
100+
itemBuilder: (context) {
101+
return getChildPopUpWidgets(context);
102+
},
103+
child: Padding(
104+
padding: EdgeInsets.all(8.0),
105+
child: Row(
106+
mainAxisAlignment: MainAxisAlignment.end,
107+
crossAxisAlignment: CrossAxisAlignment.center,
108+
children: [
109+
Padding(
110+
padding: EdgeInsets.only(right: 10, left: 5),
111+
child: Icon(Icons.brightness_1, size: 12, color: Colors.white),
112+
),
113+
Padding(
114+
padding: EdgeInsets.only(right: 10),
115+
child: Text(
116+
activePopMenu.title,
117+
style: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.w400),
118+
),
119+
)
120+
],
121+
),
122+
))),
123+
),
124+
],
125+
)),
126+
),
127+
)),
128+
),
129+
body: Container(
130+
color: Colors.white,
131+
child: Center(
132+
child: Column(
133+
mainAxisAlignment: MainAxisAlignment.center,
134+
children: <Widget>[
135+
Text(
136+
'Awesome Wave AppBar',
137+
style: TextStyle(color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
138+
),
139+
],
140+
),
141+
),
142+
));
143+
}
144+
}
145+
146+
List<PopMenuItem> getPopMenus() {
147+
List<PopMenuItem> popMenus = new List();
148+
popMenus.add(PopMenuItem(title: "Awesome", id: 1));
149+
popMenus.add(PopMenuItem(title: "Wave", id: 2));
150+
return popMenus;
151+
}
152+
153+
PopMenuItem activePopMenu = getPopMenus()[0];
154+
155+
List<PopupMenuEntry<Object>> getChildPopUpWidgets(BuildContext context) {
156+
var childrenPopMenu = List<PopupMenuEntry<Object>>();
157+
for (PopMenuItem popUpMenu in getPopMenus()) {
158+
childrenPopMenu.add(PopupMenuItem(
159+
value: popUpMenu.id,
160+
child: Padding(
161+
padding: EdgeInsets.all(6.0),
162+
child: Row(
163+
mainAxisAlignment: MainAxisAlignment.end,
164+
crossAxisAlignment: CrossAxisAlignment.center,
165+
mainAxisSize: MainAxisSize.min,
166+
children: [
167+
Padding(
168+
padding: EdgeInsets.only(right: 20),
169+
child: Icon(Icons.brightness_1, size: 12, color: popUpMenu.id == activePopMenu.id ? Colors.white : Colors.transparent),
96170
),
97-
Text(
98-
'$_counter',
99-
style: Theme.of(context).textTheme.display1,
171+
Container(
172+
width: 90,
173+
child: Text(
174+
popUpMenu.title,
175+
style: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.w400),
176+
),
100177
),
101178
],
102179
),
103180
),
104-
floatingActionButton: FloatingActionButton(
105-
onPressed: _incrementCounter,
106-
tooltip: 'Increment',
107-
child: Icon(Icons.add),
108-
), // This trailing comma makes auto-formatting nicer for build methods.
109-
);
181+
));
182+
}
183+
return childrenPopMenu;
184+
}
185+
186+
class PopMenuItem {
187+
String title;
188+
int id;
189+
190+
PopMenuItem({this.title, this.id});
191+
192+
PopMenuItem.fromJson(Map<String, dynamic> json) {
193+
title = json['title'];
194+
id = json['id'];
195+
}
196+
197+
Map<String, dynamic> toJson() {
198+
final Map<String, dynamic> data = new Map<String, dynamic>();
199+
data['title'] = this.title;
200+
data['id'] = this.id;
201+
return data;
110202
}
111203
}

‎pubspec.lock

+7
Original file line numberDiff line numberDiff line change
@@ -142,5 +142,12 @@ packages:
142142
url: "https://pub.dartlang.org"
143143
source: hosted
144144
version: "2.0.8"
145+
wave:
146+
dependency: "direct main"
147+
description:
148+
name: wave
149+
url: "https://pub.dartlang.org"
150+
source: hosted
151+
version: "0.0.8"
145152
sdks:
146153
dart: ">=2.2.2 <3.0.0"

‎pubspec.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ dependencies:
2323
# The following adds the Cupertino Icons font to your application.
2424
# Use with the CupertinoIcons class for iOS style icons.
2525
cupertino_icons: ^0.1.2
26+
wave: ^0.0.8
2627

2728
dev_dependencies:
2829
flutter_test:

0 commit comments

Comments
 (0)