こんにちは！Dreamwalkerです。
久しぶりに書くことになってしまいました。
今回は12番目の「DribbbleのデザインをFlutterでやってみた」になります。
今回のデザイン
Patryk Polak さんのFitness Activity Trackerというでデザインをやってみたい！と思います。
結果
必要なライブラリー
1．page_transition
2. fl_chart
全てのコード
Activityページ。
main_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:notebook_the_third_story/fitness_activity_tracker/static_page.dart';
import 'package:page_transition/page_transition.dart';
class FitnessActivityTracker extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: <Widget>[
Positioned(
left: 0,
right: 0,
bottom: 100,
top: 0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
CircleAvatar(),
],
),
SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.only(left: 16),
child: Text(
"Activity",
style: TextStyle(
color: Colors.black,
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(
height: 24,
),
Container(
margin: EdgeInsets.only(left: 16, right: 16),
height: MediaQuery.of(context).size.height / 1.65,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(right: 8, bottom: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border:
Border.all(color: Colors.grey[300])),
padding: EdgeInsets.only(
left: 24, top: 24, bottom: 24),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.favorite_border,
color: Colors.red,
),
Spacer(),
Text(
"131",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
Text(
"bpm",
style: TextStyle(
color: Colors.grey,
fontSize: 19,
fontWeight: FontWeight.w300),
),
Spacer(),
Text(
"Heart rate",
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
],
),
),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.only(
left: 24, top: 24, bottom: 24),
margin: EdgeInsets.only(left: 8, bottom: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey[300]),
),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.whatshot,
color: Colors.orange[500],
),
Spacer(),
Text(
"450",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
Text(
"kcal",
style: TextStyle(
color: Colors.grey,
fontSize: 19,
fontWeight: FontWeight.w300),
),
Spacer(),
Text(
"Calories",
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
),
),
Expanded(
flex: 1,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(right: 8, top: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border:
Border.all(color: Colors.grey[300])),
padding: EdgeInsets.only(
left: 24, top: 24, bottom: 24),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.directions_walk,
color: Colors.purple,
),
Spacer(),
Text(
"6551",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
Text(
"steps",
style: TextStyle(
color: Colors.grey,
fontSize: 19,
fontWeight: FontWeight.w300),
),
Spacer(),
Text(
"Step",
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
],
),
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(left: 8, top: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border:
Border.all(color: Colors.grey[300])),
padding: EdgeInsets.only(
left: 24, top: 24, bottom: 24),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.local_drink,
color: Colors.blue,
),
Spacer(),
Text(
"4",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
Text(
"cups",
style: TextStyle(
color: Colors.grey,
fontSize: 19,
fontWeight: FontWeight.w300),
),
Spacer(),
Text(
"Water",
style: TextStyle(
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
)),
],
),
)
],
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 24),
height: 80,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Statistics",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
IconButton(
icon: Icon(
Icons.keyboard_arrow_up,
),
color: Colors.white,
onPressed: () {
Navigator.of(context).push(PageTransition(
child: StatisticsPage(),
type: PageTransitionType.downToUp));
},
)
],
),
),
)
],
),
);
}
}
Statisticsページ。
static_page.dart
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class StatisticsPage extends StatefulWidget {
@override
_StatisticsPageState createState() => _StatisticsPageState();
}
class _StatisticsPageState extends State<StatisticsPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
SafeArea(
top: true,
left: true,
right: true,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(Icons.more_horiz),
),
Text(
"Statistics",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
IconButton(
icon: Icon(Icons.keyboard_arrow_down),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 42),
child: Container(
padding: EdgeInsets.only(left: 24, top: 48, right: 24),
height: MediaQuery.of(context).size.height - 130,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(32),
topLeft: Radius.circular(32),
)),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Walk",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
Spacer(),
Icon(
Icons.calendar_today,
color: Colors.white,
size: 18,
),
SizedBox(
width: 8,
),
Text(
"23 November, 2019",
style: TextStyle(
color: Colors.white,
),
),
],
),
SizedBox(
height: 24,
),
Row(
children: <Widget>[
Container(
height: 28,
width: 70,
decoration: BoxDecoration(
border:
Border.all(color: Colors.white.withOpacity(.2)),
borderRadius: BorderRadius.circular(24)),
child: Center(
child: Text(
"Day",
style: TextStyle(
color: Colors.white,
),
)),
),
SizedBox(
width: 16,
),
Container(
height: 28,
width: 70,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(24)),
child: Center(
child: Text(
"Week",
style: TextStyle(color: Colors.white.withOpacity(.3)),
)),
),
SizedBox(
width: 16,
),
Container(
height: 28,
width: 70,
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(24)),
child: Center(
child: Text(
"Month",
style: TextStyle(color: Colors.white.withOpacity(.3)),
)),
)
],
),
Container(
height: 200,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"6551",
style: TextStyle(
color: Colors.white,
fontSize: 48,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 32,
),
Text(
"steps",
style: TextStyle(
color: Colors.white.withOpacity(0.2),
fontSize: 28,
),
)
],
),
),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"5.1",
style: TextStyle(
color: Colors.white, fontSize: 18),
),
Text(
"distance",
style: TextStyle(
color: Colors.white.withOpacity(0.2)),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"450",
style: TextStyle(
color: Colors.white, fontSize: 18),
),
Text(
"kcal",
style: TextStyle(
color: Colors.white.withOpacity(0.2)),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"13.9km/h",
style: TextStyle(
color: Colors.white, fontSize: 18),
),
Text(
"average speed",
style: TextStyle(
color: Colors.white.withOpacity(0.2)),
)
],
)
],
),
),
],
),
),
Container(
height: 180,
width: MediaQuery.of(context).size.width,
child: BarChart(
BarChartData(
alignment: BarChartAlignment.spaceBetween,
maxY: 20,
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
textStyle: TextStyle(
color: Colors.white, fontSize: 12),
margin: 20,
getTitles: (double value) {
switch (value.toInt()) {
case 0:
return "14";
case 1:
return "";
case 2:
return "16";
case 3:
return "";
case 4:
return "18";
case 5:
return "";
case 6:
return "20";
case 7:
return "";
case 8:
return "22";
default:
return '';
}
}),
leftTitles: const SideTitles(showTitles: false),
),
borderData: FlBorderData(
show: false,
),
barGroups: [
BarChartGroupData(
x: 0,
barRods: [
BarChartRodData(
y: 14, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 1,
barRods: [
BarChartRodData(y: 8, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 2,
barRods: [
BarChartRodData(y: 8, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 3,
barRods: [
BarChartRodData(y: 4, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 4,
barRods: [
BarChartRodData(y: 6, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 5,
barRods: [
BarChartRodData(
y: 18, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 6,
barRods: [
BarChartRodData(
y: 10, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 7,
barRods: [
BarChartRodData(y: 8, color: Colors.orange[400])
],
),
BarChartGroupData(
x: 8,
barRods: [
BarChartRodData(
y: 10, color: Colors.orange[400])
],
),
]),
),
),
Spacer(),
Container(
height: 80,
child: Row(
children: <Widget>[
Container(
height: 60,
width: 52,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(16)),
child: Center(
child: Icon(
Icons.favorite_border,
color: Colors.white,
),
),
),
Spacer(),
Container(
width: 100,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
right: 16,
child: Text("MIN",style: TextStyle(
color: Colors.white,
),),
),
Positioned(
top: 16,
left: 16,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("64",style: TextStyle(
color: Colors.white,
fontSize: 28
),),
Text("bpm",style: TextStyle(
color: Colors.white.withOpacity(0.2),
),)
],
),
)
],
),
),
SizedBox(
width: 24,
),
Container(
width: 100,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
right: 16,
child: Text("MAX",style: TextStyle(
color: Colors.white,
),),
),
Positioned(
top: 16,
left: 16,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("146",style: TextStyle(
color: Colors.white,
fontSize: 28
),),
Text("bpm",style: TextStyle(
color: Colors.white.withOpacity(0.2),
),)
],
),
)
],
),
),
],
),
),
],
),
),
)
],
),
);
}
}
終わりに
今回も読んでくださってありがとうございます。