Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 121bf39

Browse files
Add day-55 example
1 parent becb395 commit 121bf39

File tree

2 files changed

+351
-0
lines changed

2 files changed

+351
-0
lines changed

‎assets/screenshots/stocks.png

330 KB
Loading[フレーム]

‎lib/pages/stocks.dart

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
import 'package:animate_do/animate_do.dart';
2+
import 'package:fl_chart/fl_chart.dart';
3+
import 'package:flutter/material.dart';
4+
import 'package:google_fonts/google_fonts.dart';
5+
6+
class StocksPage extends StatefulWidget {
7+
const StocksPage({ Key? key }) : super(key: key);
8+
9+
@override
10+
_StocksPageState createState() => _StocksPageState();
11+
}
12+
13+
class _StocksPageState extends State<StocksPage> {
14+
15+
// crate list of spots for the graph by monthly, yearly of Google Stocks
16+
List<FlSpot> _daylySpots = [
17+
FlSpot(0, 20.0),
18+
FlSpot(1, 20.0),
19+
FlSpot(2, 30.0),
20+
FlSpot(3, 10.0),
21+
FlSpot(4, 40.0),
22+
FlSpot(5, 60.0),
23+
FlSpot(6, 40.0),
24+
FlSpot(7, 80.0),
25+
FlSpot(8, 60.0),
26+
FlSpot(9, 70.0),
27+
FlSpot(10, 50.0),
28+
FlSpot(11, 150.0),
29+
FlSpot(12, 70.0),
30+
FlSpot(13, 80.0),
31+
FlSpot(14, 60.0),
32+
FlSpot(15, 70.0),
33+
FlSpot(16, 60.0),
34+
FlSpot(17, 80.0),
35+
FlSpot(18, 110.0),
36+
FlSpot(19, 130.0),
37+
FlSpot(20, 100.0),
38+
FlSpot(21, 130.0),
39+
FlSpot(22, 160.0),
40+
FlSpot(23, 190.0),
41+
FlSpot(24, 150.0),
42+
FlSpot(25, 170.0),
43+
FlSpot(26, 180.0),
44+
FlSpot(27, 140.0),
45+
FlSpot(28, 150.0),
46+
FlSpot(29, 150.0),
47+
FlSpot(30, 130.0)
48+
];
49+
50+
List<FlSpot> _monthlySpots = [
51+
FlSpot(0, 110.0),
52+
FlSpot(1, 110.0),
53+
FlSpot(2, 130.0),
54+
FlSpot(3, 100.0),
55+
FlSpot(4, 130.0),
56+
FlSpot(5, 160.0),
57+
FlSpot(6, 190.0),
58+
FlSpot(7, 150.0),
59+
FlSpot(8, 170.0),
60+
FlSpot(9, 180.0),
61+
FlSpot(10, 140.0),
62+
FlSpot(11, 150.0),
63+
];
64+
65+
int _currentIndex = 0;
66+
67+
@override
68+
Widget build(BuildContext context) {
69+
return Scaffold(
70+
backgroundColor: Color(0xff0E1117),
71+
appBar: AppBar(
72+
backgroundColor: Color(0xff0E1117),
73+
elevation: 0,
74+
leading: IconButton(
75+
icon: Icon(Icons.arrow_back_ios, color: Colors.blueGrey),
76+
onPressed: () {
77+
Navigator.pop(context);
78+
},
79+
),
80+
title: Text(
81+
'Stocks',
82+
style: TextStyle(
83+
color: Colors.blueGrey.shade200,
84+
fontSize: 18,
85+
fontWeight: FontWeight.bold,
86+
),
87+
),
88+
actions: <Widget>[
89+
IconButton(
90+
icon: Icon(Icons.search, color: Colors.blueGrey,),
91+
onPressed: () {},
92+
),
93+
],
94+
),
95+
body: Container(
96+
child: Column(
97+
mainAxisAlignment: MainAxisAlignment.end,
98+
children: <Widget>[
99+
FadeInUp(
100+
duration: Duration(milliseconds: 1000),
101+
from: 30,
102+
child: Text(
103+
'\$ 4,777.12',
104+
style: GoogleFonts.poppins(
105+
textStyle: TextStyle(
106+
color: Colors.blueGrey.shade100,
107+
fontSize: 36,
108+
fontWeight: FontWeight.bold,
109+
),
110+
),
111+
),
112+
),
113+
SizedBox(height: 10,),
114+
FadeInUp(
115+
duration: Duration(milliseconds: 1000),
116+
from: 30,
117+
child: Text(
118+
'+1.5%',
119+
style: TextStyle(
120+
fontSize: 18,
121+
color: Colors.green,
122+
fontWeight: FontWeight.bold,
123+
),
124+
),
125+
),
126+
SizedBox(height: 100),
127+
FadeInUp(
128+
duration: Duration(milliseconds: 1000),
129+
from: 60,
130+
child: Container(
131+
height: MediaQuery.of(context).size.height * 0.3,
132+
child: LineChart(
133+
mainData(),
134+
swapAnimationCurve: Curves.easeInOutCubic,
135+
swapAnimationDuration: Duration(milliseconds: 1000),
136+
)
137+
),
138+
),
139+
AnimatedContainer(
140+
duration: Duration(milliseconds: 500),
141+
height: MediaQuery.of(context).size.height * 0.3,
142+
padding: EdgeInsets.all(20),
143+
child: Row(
144+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
145+
children: [
146+
GestureDetector(
147+
onTap: () {
148+
setState(() {
149+
_currentIndex = 0;
150+
});
151+
},
152+
child: Container(
153+
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 15.0),
154+
decoration: BoxDecoration(
155+
borderRadius: BorderRadius.circular(10),
156+
color: _currentIndex == 0 ? Color(0xff161b22) : Color(0xff161b22).withOpacity(0.0),
157+
),
158+
child: Text("D", style: TextStyle(color: _currentIndex == 0 ? Colors.blueGrey.shade200 : Colors.blueGrey, fontSize: 20),),
159+
),
160+
),
161+
GestureDetector(
162+
onTap: () {
163+
setState(() {
164+
_currentIndex = 1;
165+
});
166+
},
167+
child: AnimatedContainer(
168+
duration: Duration(milliseconds: 500),
169+
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 15.0),
170+
decoration: BoxDecoration(
171+
borderRadius: BorderRadius.circular(10),
172+
color: _currentIndex == 1 ? Color(0xff161b22) : Color(0xff161b22).withOpacity(0.0),
173+
),
174+
child: Text("M", style: TextStyle(color: _currentIndex == 1 ? Colors.blueGrey.shade200 : Colors.blueGrey, fontSize: 20),),
175+
),
176+
),
177+
GestureDetector(
178+
onTap: () {
179+
setState(() {
180+
_currentIndex = 2;
181+
});
182+
},
183+
child: AnimatedContainer(
184+
duration: Duration(milliseconds: 500),
185+
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 15.0),
186+
decoration: BoxDecoration(
187+
borderRadius: BorderRadius.circular(10),
188+
color: _currentIndex == 2 ? Color(0xff161b22) : Color(0xff161b22).withOpacity(0.0),
189+
),
190+
child: Text("Y", style: TextStyle(color: _currentIndex == 2 ? Colors.blueGrey.shade200 : Colors.blueGrey, fontSize: 20),),
191+
),
192+
),
193+
],
194+
)
195+
),
196+
]
197+
),
198+
)
199+
);
200+
}
201+
202+
// Charts Data
203+
List<Color> gradientColors = [
204+
const Color(0xffe68823),
205+
const Color(0xffe68823),
206+
];
207+
208+
LineChartData mainData() {
209+
return LineChartData(
210+
borderData: FlBorderData(
211+
show: false,
212+
),
213+
gridData: FlGridData(
214+
show: false,
215+
horizontalInterval: 1.6,
216+
drawVerticalLine: false
217+
),
218+
titlesData: FlTitlesData(
219+
show: false,
220+
rightTitles: SideTitles(showTitles: false),
221+
topTitles: SideTitles(showTitles: false),
222+
bottomTitles: SideTitles(
223+
showTitles: false,
224+
reservedSize: 22,
225+
interval: 1,
226+
getTextStyles: (context, value) => const TextStyle(
227+
color: Color(0xff68737d),
228+
fontWeight: FontWeight.bold,
229+
fontSize: 8
230+
),
231+
getTitles: (value) {
232+
switch (value.toInt()) {
233+
case 1:
234+
return 'JAN';
235+
case 2:
236+
return 'FEB';
237+
case 3:
238+
return 'MAR';
239+
case 4:
240+
return 'APR';
241+
case 5:
242+
return 'MAY';
243+
case 6:
244+
return 'JUN';
245+
case 7:
246+
return 'JUL';
247+
case 8:
248+
return 'AUG';
249+
case 9:
250+
return 'SEP';
251+
case 10:
252+
return 'OCT';
253+
case 11:
254+
return 'NOV';
255+
case 12:
256+
return 'DEC';
257+
}
258+
return '';
259+
},
260+
margin: 10,
261+
),
262+
leftTitles: SideTitles(
263+
showTitles: false,
264+
interval: 1,
265+
getTextStyles: (context, value) => const TextStyle(
266+
color: Color(0xff67727d),
267+
fontWeight: FontWeight.bold,
268+
fontSize: 12,
269+
),
270+
271+
getTitles: (value) {
272+
switch (value.toInt()) {
273+
case 1:
274+
return '10k';
275+
case 3:
276+
return '30k';
277+
case 5:
278+
return '50k';
279+
}
280+
return '';
281+
},
282+
),
283+
),
284+
minX: 0,
285+
maxX: _currentIndex == 0 ? _daylySpots.length-1.toDouble() : _currentIndex == 1 ? _monthlySpots.length-1.toDouble() : _currentIndex == 2 ? _daylySpots.length-20.toDouble() : _daylySpots.length.toDouble(),
286+
minY: 0,
287+
maxY: 200,
288+
lineTouchData: LineTouchData(
289+
getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
290+
return spotIndexes.map((index) {
291+
return TouchedSpotIndicatorData(
292+
FlLine(
293+
color: Colors.white.withOpacity(0.1),
294+
strokeWidth: 2,
295+
dashArray: [3, 3],
296+
),
297+
FlDotData(
298+
show: false,
299+
getDotPainter: (spot, percent, barData, index) =>
300+
FlDotCirclePainter(
301+
radius: 8,
302+
color: [
303+
Colors.black,
304+
Colors.black,
305+
][index],
306+
strokeWidth: 2,
307+
strokeColor: Colors.black,
308+
),
309+
),
310+
);
311+
}).toList();
312+
},
313+
enabled: true,
314+
touchTooltipData: LineTouchTooltipData(
315+
tooltipPadding: const EdgeInsets.all(8),
316+
tooltipBgColor: Color(0xff2e3747).withOpacity(0.8),
317+
getTooltipItems: (touchedSpots) {
318+
return touchedSpots.map((touchedSpot) {
319+
return LineTooltipItem(
320+
'\$${touchedSpot.y.round()}.00',
321+
const TextStyle(color: Colors.white, fontSize: 12.0),
322+
323+
);
324+
}).toList();
325+
},
326+
),
327+
handleBuiltInTouches: true,
328+
),
329+
lineBarsData: [
330+
LineChartBarData(
331+
spots: _currentIndex == 0 ? _daylySpots : _currentIndex == 1 ? _monthlySpots : _daylySpots,
332+
isCurved: true,
333+
colors: gradientColors,
334+
barWidth: 2,
335+
dotData: FlDotData(
336+
show: false,
337+
),
338+
belowBarData: BarAreaData(
339+
show: true,
340+
gradientFrom: Offset(0, 0),
341+
gradientTo: Offset(0, 1),
342+
colors: [
343+
Color(0xffe68823).withOpacity(0.1),
344+
Color(0xffe68823).withOpacity(0),
345+
]
346+
),
347+
)
348+
],
349+
);
350+
}
351+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /