UI
1. pubspec.yaml
<![CDATA[
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
carousel_slider: ^5.0.0
fl_chart: ^0.69.0
google_fonts: ^6.2.1
syncfusion_flutter_gauges: ^27.1.56
]]>
main.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'Screen/splash_screen.dart';
void main() {
runApp(const MyApp());
}
// this is the root
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: MySplashScreen(),
);
}
}
]]>
Screen/splash_screen.dart
<![CDATA[
import 'package:b/Screen/fitness_home_screen.dart';
import 'package:b/Utils/colors.dart';
import 'package:flutter/material.dart';
class MySplashScreen extends StatelessWidget {
const MySplashScreen({super.key});
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Column(
children: [
const SizedBox(height: 40),
Image.asset(
"assets/image.png",
height: size.height * 0.68,
fit: BoxFit.fill,
width: size.width,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: size.width * 0.75,
child: const Text(
"30 Days Fitness\nChallenge",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900,
),
),
),
const SizedBox(height: 20),
const Text(
"Track your fitness level by our smart Mobile App, Calories sleep and training.",
style: TextStyle(
color: Colors.black54,
fontWeight: FontWeight.w500,
),
),
Align(
alignment: Alignment.bottomRight,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FitnessHomeScreen(),
),
);
},
child: Material(
elevation: 15,
shadowColor: primaryColor.withOpacity(0.5),
borderRadius: BorderRadius.circular(200),
child: const CircleAvatar(
radius: 30,
backgroundColor: primaryColor,
child: Icon(
Icons.arrow_forward_ios,
color: Colors.white,
),
),
),
),
)
],
),
),
],
),
);
}
}
]]>
Screen/fitness_home_screen.dart
<![CDATA[
import 'package:b/Screen/line_chart.dart';
import 'package:b/Utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';
class FitnessHomeScreen extends StatefulWidget {
FitnessHomeScreen({super.key});
@override
State<FitnessHomeScreen> createState() => _FitnessHomeScreenState();
}
class _FitnessHomeScreenState extends State<FitnessHomeScreen> {
int currentIndex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: const Icon(
Icons.arrow_back_ios,
size: 20,
),
),
const CircleAvatar(
backgroundImage: AssetImage("assets/avatar.png"),
radius: 20,
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Today",
style: TextStyle(
fontSize: 18,
color: Colors.black45,
),
),
Text(
"Sep 01, 2020",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.w800),
)
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
fitnessItems(
0,
Colors.deepOrange,
Icons.favorite_border,
"Heart",
"80",
"Per min",
),
fitnessItems(
1,
primaryColor,
Icons.crisis_alert_sharp,
"Calories",
"950",
"Kcal",
),
fitnessItems(
2,
Colors.orangeAccent,
Icons.nightlight_round_outlined,
"Sleep",
"8:30",
"Hours",
),
fitnessItems(
4,
Colors.deepPurple,
Icons.timer_sharp,
"Training",
"2:00",
"Hours",
),
],
),
),
const SizedBox(height: 30),
Center(
child: Stack(
children: [
Positioned(
left: 80,
top: 50,
child: SizedBox(
height: 200,
width: 200,
child: SfRadialGauge(
axes: [
RadialAxis(
axisLineStyle: const AxisLineStyle(
thickness: 0.2,
thicknessUnit: GaugeSizeUnit.factor,
cornerStyle: CornerStyle.bothCurve,
),
showTicks: false,
showLabels: false,
pointers: const [
RangePointer(
color: primaryColor,
value: 80,
cornerStyle: CornerStyle.bothCurve,
width: 0.2,
sizeUnit: GaugeSizeUnit.factor,
),
],
annotations: const [
GaugeAnnotation(
widget: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"2.0",
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 30,
),
),
Text(
"KM",
style: TextStyle(
fontSize: 14,
),
)
],
),
positionFactor: 0.1,
),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(left: 30),
child: SizedBox(
height: 300,
width: 300,
child: SfRadialGauge(
axes: [
RadialAxis(
axisLineStyle: const AxisLineStyle(
thickness: 0.15,
thicknessUnit: GaugeSizeUnit.factor,
cornerStyle: CornerStyle.bothCurve,
),
showTicks: false,
showLabels: false,
pointers: const [
RangePointer(
color: secondaryColor,
value: 65,
cornerStyle: CornerStyle.bothCurve,
width: 0.15,
sizeUnit: GaugeSizeUnit.factor,
),
],
),
],
),
),
),
Positioned(
bottom: 10,
left: 140,
child: Image.asset(
"assets/running.png",
height: 100,
),
),
],
),
),
const SizedBox(height: 20),
SizedBox(
height: MediaQuery.of(context).size.height / 5,
child: const Stack(
clipBehavior: Clip.none,
children: [
MyLineChart(),
Positioned(
top: -10,
left: 90,
child: CircleAvatar(
radius: 10,
backgroundColor: secondaryColor,
),
),
Positioned(
bottom: 40,
left: 15,
right: 15,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"1km",
style: TextStyle(fontSize: 15),
),
Text(
"2km",
style: TextStyle(fontSize: 15),
),
Text(
"3km",
style: TextStyle(fontSize: 15),
),
Text(
"4km",
style: TextStyle(fontSize: 15),
),
Text(
"5km",
style: TextStyle(fontSize: 15),
),
Text(
"6km",
style: TextStyle(fontSize: 15),
)
],
))
],
),
)
],
),
bottomNavigationBar: const SizedBox(
height: 90,
child: BottomAppBar(
color: primaryColor,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 180,
top: 0,
child: CircleAvatar(
radius: 25,
backgroundColor: secondaryColor,
child: Icon(
Icons.add,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(top: 12, left: 15, right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.house_outlined,
color: Colors.white,
size: 30,
),
Icon(
Icons.line_axis_rounded,
color: Colors.white,
size: 30,
),
SizedBox(width: 40),
Icon(
Icons.favorite_border,
color: Colors.white,
size: 30,
),
Icon(
Icons.person_outline,
color: Colors.white,
size: 30,
),
],
),
),
],
),
),
),
);
}
Expanded fitnessItems(int index, color, icon, name, value, unit) {
return Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
border: Border.all(
color: currentIndex == index ? secondaryColor : Colors.transparent,
),
borderRadius: BorderRadius.circular(50),
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
child: Icon(
icon,
color: Colors.white,
),
),
const SizedBox(height: 10),
Text(
name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
value,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
unit,
style: const TextStyle(
fontSize: 12,
color: Colors.black38,
),
),
],
),
),
);
}
}
]]>
Screen/line_chart.dart
<![CDATA[
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class MyLineChart extends StatelessWidget {
const MyLineChart({super.key});
@override
Widget build(BuildContext context) {
return LineChart(
LineChartData(
gridData: const FlGridData(show: false),
titlesData: const FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
topTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
),
borderData: FlBorderData(show: false),
minX: 0,
maxX: 12,
maxY: 4,
minY: 0,
lineBarsData: [
LineChartBarData(
spots: [
const FlSpot(0, 3),
const FlSpot(1.5, 3.3),
const FlSpot(3, 4),
const FlSpot(5, 3),
const FlSpot(7, 4),
const FlSpot(9, 3),
const FlSpot(11, 4),
const FlSpot(12, 3),
],
isCurved: true,
color: Colors.pink.withOpacity(0.5),
barWidth: 3,
dotData: const FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
color: Colors.pink.withOpacity(0.1),
),
),
],
),
);
}
}
]]>
Model/model.dart
<![CDATA[
class FacebookUser {
String name;
String image;
String status;
String profileImage;
bool isOnline;
String like;
String comment;
String storyImage;
String time;
FacebookUser({
required this.name,
required this.comment,
required this.image,
required this.isOnline,
required this.like,
required this.profileImage,
required this.status,
required this.storyImage,
required this.time,
});
}
List<FacebookUser> userInfo = [
FacebookUser(
name: "Johna Smith",
image: "images/image1.png",
status:
"Roaming far and wide, chasing dreams. Each journey a tale untold, a soul enriched. #Wanderlust #Adventure",
comment: "111",
isOnline: true,
like: "11K",
time: "12 min ago",
profileImage: "images/profile5.png",
storyImage: "images/story1.png"),
FacebookUser(
name: "Maria Garcia",
image: "images/image2.png",
time: "2 h ago",
status:"",
//"Style is my language, expressing who I am. Confidence sewn into every stitch. #FashionForward #ExpressYourself",
comment: "200",
isOnline: true,
like: "20.5K",
profileImage: "images/profile3.png",
storyImage: "images/image3.png"),
FacebookUser(
name: "Mohammad Ali",
image: "images/image8.png",
time: "1 day ago",
status:
"Exploring new horizons, discovering wonders. Memories made, hearts touched. #TravelDiaries #Discover",
comment: "2",
isOnline: false,
like: "20",
profileImage: "images/profile1.png",
storyImage: "images/story2.png"),
FacebookUser(
name: "Anna Johnson",
time: "22 hr ago",
image: "",
status:
"Life's a game; play it well. Laughter echoes, joy multiplies. Let's have some fun! #PlayfulSpirit #JoyfulLiving",
comment: "20",
isOnline: true,
like: "2K",
profileImage: "images/profile2.png",
storyImage: "images/story3.png"),
FacebookUser(
name: "Chen Wei",
time: "2 week ago",
image: "images/story2.png",
status:
"In quiet moments, find serenity. Stillness speaks, wisdom whispers. Peace within, tranquility embraced. #InnerPeace #Mindfulness",
comment: "1k",
isOnline: false,
like: "100K",
profileImage: "images/profile4.png",
storyImage: "images/image1.png"),
];
]]>
Utils/color.dart
<![CDATA[
import 'package:flutter/material.dart';
const Color primaryColor = Color(0xff156C78);
const Color secondaryColor = Color(0xffFB784E);
]]>
MANVIA BLOG
