- Instagram Post & Shopping Card UI In Flutter -
1. Shopping Card UI With Output -
Shopping Card UI
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white30),
useMaterial3: true,
),
home: const MyHomePage(title: 'Home',),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 400,
height: 100,
color: Colors.amberAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/images/task2.jpg",width: 100),
const Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Umberla for sale",style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700),),
Text("200 bougth this"),
],
),
const Row(
children: [
Text("4.5"),
Icon(Icons.star,size: 10,)
],
),
],
),
),
),
));
}
}
Output -
2. Shopping Card With Buttons -
Shopping Card UI With Buttons
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white30),
useMaterial3: true,
),
home: const MyHomePage(title: 'Home',),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body:
Center(
child: Container(
width: 300,
height: 380,
color: Colors.amberAccent,
child: Column(
children: [
Image.asset("assets/images/task2.jpg"),
SizedBox(height: 11,),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Umbrela for Sale",style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700),),
Text("200 bougth this",style: TextStyle(fontSize: 15),),
],
) ,
Row(
children: [
Text("4.5",style: TextStyle(fontSize: 18,fontWeight: FontWeight.w400),),
Icon(Icons.star)
],
),
],
),
),
),
SizedBox(height: 20,),
Container(
width: 250,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(onPressed:(){}, child: Text("Add to Cart",),style: ButtonStyle(elevation: MaterialStatePropertyAll(20)),),
ElevatedButton(onPressed: (){}, child: Text("Buy Now",),style: ButtonStyle(elevation:MaterialStatePropertyAll(20)),)
],
),
)
],
),
),
)
);
}
}
Output - 
3. Instagram Post UI With Output -
Instagram Post UI
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white30),
useMaterial3: true,
),
home: const MyHomePage(title: 'Home',),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body:Center(
child: Container(
width: 350,
height: 350,
color: Colors.amberAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipOval(child: Image.asset("assets/images/task2.jpg",scale: 30,width: 50,height: 50,fit: BoxFit.cover,)),
SizedBox(width: 10,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Mahesh Patil",style: TextStyle(fontSize: 18,fontWeight: FontWeight.w500),),
Text("5 mins ago")
],
)
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.menu_rounded),
)
],
),
SizedBox(height: 10,),
Image.asset("assets/images/task2.jpg"),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
Icon(Icons.thumb_up),
Text("Like"),
],
),
Row(
children: [
Icon(Icons.comment),
Text("Comment"),
],
),
Row(
children: [
Icon(Icons.share),
Text("Share"),
],
),
],
)
],
),
),
)
);
}
}
Output -
0 Comments