Skip to content

Instantly share code, notes, and snippets.

@minhcasi
Created January 8, 2024 08:40
Show Gist options
  • Save minhcasi/f9793dba95ebd6d1a980c00e86fb2cf8 to your computer and use it in GitHub Desktop.
Save minhcasi/f9793dba95ebd6d1a980c00e86fb2cf8 to your computer and use it in GitHub Desktop.
Generated code from pixels2flutter.dev
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),
),
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment