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: YouTubeCloneHomePage(),
    );
  }
}

class YouTubeCloneHomePage 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-N60I4VzfJW6Lk6etFO14pqAB.png%3Fst%3D2024-01-08T07%253A40%253A06Z%26se%3D2024-01-08T09%253A40%253A06Z%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-08T08%253A10%253A07Z%26ske%3D2024-01-09T08%253A10%253A07Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DuWboKrHKrCDTTuyY1mxsUWiMVN5TnQlOWiHF%252B0%2FArlI%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'),
                _buildChip('Drum'),
                _buildChip('Climbing'),
                _buildChip('Chords'),
                SizedBox(width: 8),
              ],
            ),
          ),
        ),
      ),
      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-OHjVIeH94WJM5i32gkCeiv2a.png%3Fst%3D2024-01-08T07%253A40%253A09Z%26se%3D2024-01-08T09%253A40%253A09Z%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-07T14%253A08%253A12Z%26ske%3D2024-01-08T14%253A08%253A12Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D3KaTOsttgfOreY%2FvJWGFeJDRL3CdSI5Qxd%252BoZgGEX8k%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-74HFCFg7xnWF2jzDie8gxpkT.png%3Fst%3D2024-01-08T07%253A40%253A07Z%26se%3D2024-01-08T09%253A40%253A07Z%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-07T13%253A47%253A56Z%26ske%3D2024-01-08T13%253A47%253A56Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DBvE%2Fn0D7LMBaExouYyJy5uD6v8eo4Bq3wqTV%252B%252BLTOhc%253D',
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.short_text),
            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 = false]) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Chip(
        labelPadding: EdgeInsets.symmetric(horizontal: 8),
        label: Text(
          label,
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.black,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
        backgroundColor: isSelected ? Colors.black : Colors.grey[300],
      ),
    );
  }

  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-XXreq79DeiBimk979FLzMjSC.png%3Fst%3D2024-01-08T07%253A40%253A07Z%26se%3D2024-01-08T09%253A40%253A07Z%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-07T22%253A45%253A53Z%26ske%3D2024-01-08T22%253A45%253A53Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DTtEsss00WN7t9WqjWfNINZQ9aOYGd%2FVRqUxYpNHgVhE%253D',
            ),
          ),
          title: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          subtitle: Text('$channel • $views • $timeAgo'),
          trailing: Icon(Icons.more_vert),
        ),
      ],
    );
  }
}