UI Fitness App

  • Screen 1

    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(),
        );
      }
    }
    
    </xmp</pre>
    
    <h3>fitness_home_page.dart</h3>
    <pre><xmp>
    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<FitnessDetail> 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,
      ),
    ];