UI
main.dart
import 'package:b/fitness_home_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// For fonts.
textTheme: GoogleFonts.poppinsTextTheme(),
),
home: const FitnessHomePage(),
);
}
}
fitness_home_page.dart
import 'package:b/Model/fitness_model.dart';
import 'package:b/detail_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class FitnessHomePage extends StatelessWidget {
const FitnessHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 66, left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset(
"Images/favorite.png",
height: 50,
),
Image.asset(
"Images/profile.png",
height: 90,
),
],
),
const SizedBox(
height: 15,
),
const Text(
" Select\n Workout",
style: TextStyle(
height: 1,
fontWeight: FontWeight.bold,
fontSize: 50,
),
),
const SizedBox(
height: 25,
),
SizedBox(
height: 110,
child: ListView.builder(
shrinkWrap: true,
itemCount: userItems.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final fitness = userItems[index];
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(200),
color: const Color.fromARGB(11, 0, 0, 0),
image: DecorationImage(
image: AssetImage(fitness.emojiImage),
),
),
height: 100,
width: 95,
),
);
}),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: userItems.length,
itemBuilder: (context, index) {
final fitness = userItems[index];
return Padding(
padding: const EdgeInsets.all(8.0),
child: Hero(
tag: fitness.color,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: fitness.color,
),
height: 190,
width: 95,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailScreen(fitness: fitness),
),
);
},
child: Row(
children: [
const SizedBox(
width: 30,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
fitness.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30),
),
const SizedBox(
height: 7,
),
Text(
"with ${fitness.instructor}",
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black45,
fontSize: 18),
),
const SizedBox(
height: 35,
),
Container(
height: 45,
width: 130,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.play_arrow),
SizedBox(
width: 10,
),
Text(
"${fitness.time} min",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18),
),
],
),
),
],
),
// For image
Padding(
padding: const EdgeInsets.only(top: 10),
child: Container(
height: 190,
width: MediaQuery.of(context).size.width / 2.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
fitness.image,
))),
),
)
],
),
),
),
),
);
},
),
),
],
),
),
);
}
}
details_screen.dart
import 'package:b/Model/fitness_model.dart';
import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
const DetailScreen({super.key, required this.fitness});
final FitnessDetail fitness;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
iconTheme: const IconThemeData(color: Colors.white),
),
body: SingleChildScrollView(
child: Column(
children: [
// for image and more
displayImage(context),
const SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 33),
child: Row(
children: [
Text(
fitness.instructor,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 23,
),
),
const SizedBox(
width: 10,
),
const Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 20,
),
const Spacer(),
const CircleAvatar(
backgroundColor: Color.fromARGB(98, 91, 80, 41),
radius: 22,
child: Icon(
Icons.star,
size: 25,
color: Colors.amber,
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 33),
child: Row(
children: [
Text(
"${fitness.name} coach . ",
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white54,
fontSize: 16,
),
),
const Text(
"3 more lessons ",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white54,
fontSize: 16,
),
),
],
),
),
const SizedBox(
height: 25,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Container(
height: 65,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: const LinearGradient(colors: [
Color.fromARGB(255, 104, 181, 244),
Color.fromARGB(255, 116, 69, 245),
Color.fromARGB(255, 1216, 65, 243),
])),
child: const Center(
child: Text(
"Let's Go",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.white),
),
),
),
),
const SizedBox(
height: 15,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Container(
height: 65,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: const Color.fromARGB(66, 175, 171, 171),
borderRadius: BorderRadius.circular(20),
),
child: const Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.play_circle,
color: Colors.white,
),
Text(
"Preview",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.white),
),
],
)),
),
),
const SizedBox(
height: 10,
),
// for description
Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
child: Text(
fitness.description,
style: const TextStyle(color: Colors.white, fontSize: 14),
),
),
],
),
),
);
}
Hero displayImage(BuildContext context) {
return Hero(
tag: fitness.color,
child: Container(
height: MediaQuery.of(context).size.height * 0.47,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: fitness.color,
image: DecorationImage(
image: AssetImage(
fitness.image,
),
fit: BoxFit.fill),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
),
child: Stack(
children: [
Positioned(
bottom: 50,
left: 30,
child: Text(
fitness.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 45,
),
)),
Positioned(
bottom: 55,
right: 30,
child: Container(
height: 45,
width: 130,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(40)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.play_arrow),
const SizedBox(
width: 10,
),
Text(
"${fitness.time} min",
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 18),
),
],
),
),
),
],
),
),
);
}
}
Model/fitness_model.dart
import 'package:flutter/material.dart';
class FitnessDetail {
String image;
String emojiImage;
String name;
String instructor;
String description;
Color color;
int time;
FitnessDetail({
required this.emojiImage,
required this.description,
required this.color,
required this.image,
required this.name,
required this.instructor,
required this.time,
});
}
List userItems = [
FitnessDetail(
emojiImage: "Images/4.png",
description: "Yoga is an ancient practice originating from India that integrates physical postures (asanas), breathing techniques (pranayama), and meditation. It promotes physical strength, flexibility, and mental well-being, offering a diverse range of styles to suit different needs, from gentle stretching to intense workouts.",
color: const Color(0xFFC7E9FE),
image: "Images/yoga1.png",
name: 'Yoga',
instructor: "Love Danial",
time: 25,
),
FitnessDetail(
emojiImage: "Images/5.png",
description: "Drills, specific exercises targeting athletic performance, refine skills and technique, emphasizing speed, agility, coordination, and strength. Each of these practices offers unique pathways to physical health, mental well-being, and personal growth.",
color: const Color(0xFFFFDEFF),
image: "Images/drill.png",
name: 'Drill',
instructor: "Jany Fox",
time: 10,
),
FitnessDetail(
emojiImage: "Images/3.png",
description: "Running, on the other hand, engages the body in continuous aerobic movement, providing cardiovascular benefits, improving endurance, and releasing endorphins for a mood boost. Meanwhile, drills, specific exercises targeting athletic performance, refine skills and technique, emphasizing speed, agility, coordination, and strength. ",
color: const Color.fromARGB(255, 199, 254, 216),
image: "Images/running1.png",
name: 'Running',
instructor: "Robert Sel",
time: 52,
),
FitnessDetail(
emojiImage: "Images/6.png",
description: " Meditation, a complementary practice, further enhances mental clarity and emotional stability through focused attention, mindfulness, or contemplation. Running, on the other hand, engages the body in continuous aerobic movement, providing cardiovascular benefits, improving endurance, and releasing endorphins for a mood boost. ",
color: const Color.fromARGB(255, 200, 199, 254),
image: "Images/mediation1.png",
name: 'Mediation',
instructor: "John Doy",
time: 20,
),
];