Skip to content

Instantly share code, notes, and snippets.

@minhcasi
Created January 8, 2024 08:35
Show Gist options
  • Save minhcasi/a5b970cb78c917af5b4e24e681a415a9 to your computer and use it in GitHub Desktop.
Save minhcasi/a5b970cb78c917af5b4e24e681a415a9 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,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
'facebook',
style: TextStyle(
color: Colors.blueAccent,
fontSize: 28.0,
fontWeight: FontWeight.bold,
),
),
actions: [
IconButton(
icon: Icon(Icons.search, color: Colors.black),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.message, color: Colors.black),
onPressed: () {},
),
],
),
body: ListView(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"What's on your mind?",
style: TextStyle(fontSize: 18.0),
),
),
Divider(),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Stories',
style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),
),
),
Container(
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) {
return StoryCard(index: index);
},
),
),
Divider(),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Reels',
style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),
),
),
Container(
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) {
return ReelCard(index: index);
},
),
),
Divider(),
PostCard(),
],
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.ondemand_video),
label: 'Video',
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
label: 'Friends',
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag),
label: 'Marketplace',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
label: 'Notifications',
),
BottomNavigationBarItem(
icon: Icon(Icons.menu),
label: 'Menu',
),
],
),
);
}
}
class StoryCard extends StatelessWidget {
final int index;
StoryCard({required this.index});
@override
Widget build(BuildContext context) {
return Container(
width: 120.0,
margin: EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.grey[300],
),
child: Column(
children: [
Expanded(
child: Image.network(
'https://placehold.co/110x110?description=Story%20Image%20$index',
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
index == 0 ? 'Create story' : 'Name $index',
style: TextStyle(fontSize: 16.0),
),
),
],
),
);
}
}
class ReelCard extends StatelessWidget {
final int index;
ReelCard({required this.index});
@override
Widget build(BuildContext context) {
return Container(
width: 120.0,
margin: EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.grey[300],
),
child: Column(
children: [
Expanded(
child: Image.network(
'https://placehold.co/110x110?description=Reel%20Image%20$index',
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Name $index',
style: TextStyle(fontSize: 16.0),
),
),
],
),
);
}
}
class PostCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.all(8.0),
child: Column(
children: [
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
'https://placehold.co/40x40?description=User%20Avatar',
),
),
title: Text('Airbridge'),
subtitle: Text('1h'),
trailing: Icon(Icons.more_horiz),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Are you a marketer grappling with the challenge of measuring precise iOS performance?',
style: TextStyle(fontSize: 16.0),
),
),
Image.network(
'https://placehold.co/400x200?description=Post%20Image',
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('airbridge.io'),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment