Skip to content

Instantly share code, notes, and snippets.

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