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,
      title: 'YouTube UI Clone',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Image.network(
          'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-JBOqhbvs1I056jueYCkHkPdy.png%3Fst%3D2024-01-08T07%253A41%253A37Z%26se%3D2024-01-08T09%253A41%253A37Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-01-07T15%253A40%253A29Z%26ske%3D2024-01-08T15%253A40%253A29Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D3xlLZUMp3RIbgf2Cqi%252B%2FLsQCvb8a2glVJvxxyqVcha4%253D',
          height: 20,
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.cast),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.notifications_none),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.account_circle),
            onPressed: () {},
          ),
        ],
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(48),
          child: Container(
            height: 48,
            alignment: Alignment.center,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                SizedBox(width: 8),
                _buildChip('All', true),
                _buildChip('Music', false),
                _buildChip('Drum', false),
                _buildChip('Climbing', false),
                _buildChip('Chords', false),
              ],
            ),
          ),
        ),
      ),
      body: ListView(
        children: [
          _buildVideoTile(
            'RISKIEST Mountain Bike Ride of My Life 1000ft Drop',
            'WOLFPACK ADVENTURES',
            '5M views',
            '4 months ago',
            'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-sCp5owY5IYqUd9n0fLMPegrI.png%3Fst%3D2024-01-08T07%253A41%253A37Z%26se%3D2024-01-08T09%253A41%253A37Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-01-07T11%253A11%253A50Z%26ske%3D2024-01-08T11%253A11%253A50Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DGwtyAh%2FF8EyQ4JuQR7eq5n3kIT8NJPggL%2FtdRWLBl88%253D',
          ),
          _buildVideoTile(
            'Blender 4.0 Is Here: A Revolution...For Free!',
            'Two Minute Papers',
            '242K views',
            '2 days ago',
            'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-UiIGsROHueooRji0juQMnDoa.png%3Fst%3D2024-01-08T07%253A41%253A40Z%26se%3D2024-01-08T09%253A41%253A40Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-01-08T04%253A05%253A28Z%26ske%3D2024-01-09T04%253A05%253A28Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DzkCwjwdpEPVwW%2Flgu3yrMl71cj54ApnwFhOrkaVzU44%253D',
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shortcut),
            label: 'Shorts',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle_outline),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.subscriptions),
            label: 'Subscriptions',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            label: 'You',
          ),
        ],
      ),
    );
  }

  Widget _buildChip(String label, bool isSelected) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Chip(
        labelPadding: EdgeInsets.symmetric(horizontal: 12),
        label: Text(
          label,
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: isSelected ? Colors.black : Colors.white,
      ),
    );
  }

  Widget _buildVideoTile(String title, String channel, String views, String timeAgo, String thumbnailUrl) {
    return Column(
      children: [
        Image.network(thumbnailUrl),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(
              'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-9IvNGfaIPpwUi23JUk7207ia.png%3Fst%3D2024-01-08T07%253A41%253A38Z%26se%3D2024-01-08T09%253A41%253A38Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-01-08T02%253A06%253A53Z%26ske%3D2024-01-09T02%253A06%253A53Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DdMkQHv4xj0yLId8Uj3IQvnnGOs2cc8YOZHDqtpxTAJs%253D',
            ),
          ),
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text('$channel · $views · $timeAgo'),
          trailing: Icon(Icons.more_vert),
        ),
      ],
    );
  }
}