Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.grey,
      ),
      home: PlannerScreen(),
    );
  }
}

class PlannerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('11:49', style: TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
        actions: [
          Icon(Icons.more_vert, color: Colors.black),
        ],
        elevation: 0,
      ),
      body: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('Planner', style: TextStyle(fontSize: 34, fontWeight: FontWeight.bold)),
          ),
          WeekDays(),
          WorkoutCard(),
          MealCard(title: 'BREAKFAST', mealName: 'Peanut Butter Cup Smoothie', duration: '5 MIN'),
          MealCard(title: 'LUNCH', mealName: 'Grab & Go Broccoli Quinoa Salad', duration: '10 MIN'),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: 'Planner',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.fitness_center),
            label: 'Programs',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'Shopping List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class WeekDays extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: List.generate(7, (index) {
          return Container(
            width: 60,
            child: Card(
              child: Center(
                child: Text(
                  index == 0 ? 'M\n8' : '${index + 8}',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: index == 0 ? Colors.white : Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              color: index == 0 ? Colors.black : Colors.white,
            ),
          );
        }),
      ),
    );
  }
}

class WorkoutCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(16),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.black,
                child: Icon(Icons.directions_run, color: Colors.white),
              ),
              title: Text("It's go time! Start your first workout"),
              subtitle: Text('Every workout gets you closer to your goals. Your first session is waiting!'),
            ),
            SizedBox(height: 16),
            Text('COACHED', style: TextStyle(color: Colors.grey)),
            Text('HIIT HIRT Strength: New total-body start', style: TextStyle(fontWeight: FontWeight.bold)),
            Text('24 MIN · NO EQUIPMENT'),
          ],
        ),
      ),
    );
  }
}

class MealCard extends StatelessWidget {
  final String title;
  final String mealName;
  final String duration;

  const MealCard({
    Key? key,
    required this.title,
    required this.mealName,
    required this.duration,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(color: Colors.grey)),
            SizedBox(height: 8),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(
                  'https://placehold.co/100x100?description=Meal%20Image',
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(mealName, style: TextStyle(fontWeight: FontWeight.bold)),
                      SizedBox(height: 4),
                      Text(duration),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}