how to add horizontal scroll bar flutter - flutter

I'm trying to make a grocery app UI using flutter. How do I add a horizontal scroll bar to this code? suggest a proper way to do this without affecting other codes? the right side of the image shows my implementation so far. can someone please suggest to me a way to do this? also how do I add that left green box in front of search box?
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.green ),
label: 'Home',
backgroundColor: Colors.white,
),
BottomNavigationBarItem(
icon: Icon(Icons.person,color: Colors.grey),
label: 'Profile',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart,color: Colors.grey),
label: 'cart',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications ,color: Colors.grey),
label: 'bell',
// backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon: Icon( Icons.more_horiz, color: Colors.grey),
label: 'bell',
// backgroundColor:Colors.blue,
),
]),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: ListView(
children: [
buildSearchInput(),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffFFFCEE),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffFFFCEE),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)),
const Padding(
padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffE2F3DF),
),
height: 180,
width: 380,
child: Column(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
child: Text(
"FRUIT AND BERRIES",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.lightGreen,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
child: Text(
"Rs.0.90/kg",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 10,
color: Colors.grey,
fontWeight: FontWeight.w700),
),
),
],
)
)),
const Padding(
padding: EdgeInsets.fromLTRB(100, 0, 40, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
// height:200,
),
),
],
),
],
),
),
);
}
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}

You can add ListView with scrollDirection: Axis.horizontal, in this case it will be needed to have fixed height, and it will be scrolled up based on parent ListView scroll event.
buildSearchInput(),
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(14, (index) => Text("item $index")),
),
),
If you wish to have it on top fixed position, wrap everything with Column and ListView with Expanded.
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: Column(
children: [
buildSearchInput(),
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(14, (index) => Text("item $index")),
),
),
Expanded(
child: ListView(
children: [
Stack(....
Head to flutter.dev for info.

Related

How to organize widgets on flutter?

This is my problem:
I want to achieve this design, like this:
This is my code:
#override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: ClipRRect(
//<---here
borderRadius: BorderRadius.circular(10),
child: Container(
height: MediaQuery.of(context).size.height,
width: 600,
decoration: const BoxDecoration(
color: Color(0xffF6F6F6),
),
child: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Icon(FontAwesomeIcons.checkDouble,
size: 40, color: Color(0xffD6D6D6)),
Icon(FontAwesomeIcons.squareXmark,
size: 40, color: Color(0xff404040)),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 60, 15, 0),
child: Stack(
children: [
Center(
child: Text(
"We send you an Email",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Divider(color: Color(0xff3B3B3B)),
),
Text(
"Please, check your Email inbox to log in and start using Pomoworko",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Divider(color: Color(0xff3B3B3B)),
),
],
),
),
RiveAnimation.asset(
"img/letter_and_knife.riv",
),
],
),
),
),
),
),
),
),
);
}
I get stuck on this, I used a column, but don't work, and I don't know how to organize the widgets, what widget may be helpful to use in order to achieve the second design?
The pink color is: color: Color(0xffF4CFDD)
Thanks for considering my request.
You are using wrong widget, instead of stack, you need to use column like this:
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: MediaQuery.of(context).size.height,
width: 600,
decoration: const BoxDecoration(
color: Color(0xffF6F6F6),
),
child: LayoutBuilder(
builder: (context, constraints) => Column(
children: [
Container(
color: Colors.white,
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: const [
Icon(Icons.check,
size: 40, color: Color(0xffD6D6D6)),
Icon(Icons.close,
size: 40, color: Color(0xff404040)),
],
),
),
Padding(
padding:
const EdgeInsets.fromLTRB(15, 60, 15, 0),
child: Column(
children: [
Center(
child: Text(
"We send you an Email",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 8.0),
child: Divider(color: Color(0xff3B3B3B)),
),
Text(
"Please, check your Email inbox to log in and start using Pomoworko",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
Padding(
padding:
EdgeInsets.symmetric(vertical: 8.0),
child: Divider(color: Color(0xff3B3B3B)),
),
],
),
),
Container(
color: Colors.red,
width: 100,
height: 100,
),
],
),
),
),
),
),
),
),
)

how to add a UI Search bar in a stack flutter

how can I add my search bar in a different stack in my code? without creating a widget. here's my home. dart file. as you can see I have added a search bar in a different widget at the end of the code. please help me to add this same code in a stack. if it is not possible suggest me another way to do this.
home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
#override
_HomePageState createState() => _HomePageState();}
class _HomePageState extends State <HomePage>{
#override
Widget build (BuildContext context){
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),//padding for search bar
child: ListView (
children: [
buildSearchInput(), //searchbar
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Banana",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Kiwi",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
),
),
],
),
],
),
),
);
}
//search bar
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}
Add it by wrapping it inside Positioned() widget, specifying top, left [and right] padding values.
For it to be visible, insert it as the last item in stack, that way it will be the topmost one on Z axis.
By specifying top,left [and right] values close to 0, it will appear on top and above all other widgets in the stack.

How to allow user to Tap header to open on ExpansionPanel

I have built a help / FAQ screen within my flutter app. Using expansion tile I have created the UI but I am having issues with tapping the header.
I'm wanting to allow the user to tap the header to open that tile. Currently, the user has to tap the arrow to open.
I have added "canTapOnHeader: true," but that does not seem to work. I've searched Stackoverflow but still had no luck
Any help would be great!
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
itemData[index].headerItem,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 17,
),
),
),
),
],
);
},
body: Container(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.asset(
itemData[index].img,
fit: BoxFit.cover,
),
SizedBox(height: 10),
Divider(
thickness: 3.0,
height: 3.0,
color: Theme.of(context).accentColor,
indent: 10,
endIndent: 300),
Padding(
padding: const EdgeInsets.only(left: 8.0, top: 10),
child: Text(
itemData[index].description,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 15,
height: 1.3,
),
),
),
],
),
),
canTapOnHeader: true,
isExpanded: itemData[index].expanded,
)
],
expansionCallback: (int item, bool status) {
setState(() {
itemData[index].expanded = !itemData[index].expanded;
});
},
),
);
},
),
),
);}
List<ItemModel> itemData = <ItemModel>[
ItemModel(
headerItem: 'This is a header question?',
description:
"This is the description for the question.",
img: 'assets/images/typingtextgiphy.gif',
),
];
}
class ItemModel {
bool expanded;
String headerItem;
String description;
String img;
ItemModel({
this.expanded: false,
this.headerItem,
this.description,
this.img,
});
}
Managed to find the solution for this. Here's the code, can copy and paste
class _HelpPanelState extends State<HelpPanel> {
#override
Widget build(BuildContext context) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(
color: Theme.of(context).accentColor,
),
title: Text(AppLocalizations.of(context)!.tutorial,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 20.0,
color: Theme.of(context).colorScheme.primary)),
elevation: 0.0,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Card(
elevation: 3,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(color: Colors.white)),
child: Padding(
padding: EdgeInsets.only(
top: 0.0, left: 15.0, right: 15.0, bottom: 0.0),
child: ExpansionTile(
title: Text(
"QUESTION",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
),
),
textAlign: TextAlign.left,
),
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image(
image: AssetImage(
'assets/images/typingautoverse.gif',
),
),
),
),
SizedBox(height: 5),
Padding(
padding:
const EdgeInsets.only(left: 15.0, bottom: 10),
child: Text(
"ANSWER",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
height: 1.3,
),
),
),
),
],
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Card(
elevation: 3,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide(color: Colors.white)),
child: Padding(
padding: EdgeInsets.only(
top: 0.0, left: 15.0, right: 15.0, bottom: 0.0),
child: ExpansionTile(
title: Text(
"QUESTION",
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
),
),
textAlign: TextAlign.left,
),
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 15.0, bottom: 10),
child: Text(
"ANSWER"
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 20,
color: Theme.of(context).accentColor,
letterSpacing: 0.4,
height: 1.3,
),
),
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}

Flutter card layout and design

So I'm trying to create an expandable card. But the problem is, I don't even know how to start with the design.
So I'm trying to achieve this output
And this is my current progress
I tried putting two containers in a column, but it just doesn't look right.
Can someone please help me out. I need to achieve the top part of the card.
This is the code for my current progress
Widget buildTabCards() {
return Container(
padding: EdgeInsets.only(
top: 10.0,
left: 10,
right: 10,
),
child: Column(children: [
Card(
elevation: 5.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.only(
top: 7,
bottom: 10,
),
child: Column(
children: <Widget>[
buildCardDateandTime(),
buildCardAvatar(),
],
),
),
),
Widget buildCardDateandTime() {
return Container(
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
left: 15,
right: 5,
top: 2,
),
child: Icon(
MdiIcons.clockOutline,
size: 22,
color: AppColors.blue,
),
),
Text(
"12 June, 2021, 8:00 AM",
style: TextStyle(
fontFamily: "Poppins",
color: Colors.black87,
letterSpacing: 0.3,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
SizedBox(width: 5),
Padding(padding: EdgeInsets.only(left: 50)),
IconButton(
icon: Icon(
MdiIcons.fromString('dots-vertical'),
size: 30,
color: AppColors.blue,
),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
);
}
Widget buildCardAvatar() {
return Padding(
padding: EdgeInsets.only(
left: 25,
top: 5,
bottom: 10,
),
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
child: Text(
"JS",
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: 5.0,
),
Padding(padding: EdgeInsets.only(left: 10)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"John Renzo",
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
fontWeight: FontWeight.w500,
),
),
Text(
"Sangalang",
style: TextStyle(
fontSize: 20.0,
color: Colors.black54,
fontWeight: FontWeight.w500,
),
)
]))
]));
}
First declare a variable
bool extended = false;
then
Padding(
padding: const EdgeInsets.only(left: 12.0, right: 12.0, top: 9.0, bottom: 9.0),
child: Container(
width: MediaQuery.of(context).size.width,
child: InkWell(
onTap: () {
setState(() {
if (extended == null || !extended)
extended = true;
else
extended = false;
});
},
enableFeedback: false,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Center(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Row(
children: <Widget>[
Expanded(
child: Text(
'Text',
style: TextStyle(fontSize: 16.0),
),
),
Icon(
extended ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
size: 26,
color: Colors.grey,
)
],
),
SizedBox(
height: 10.0,
),
extended
? Container(
height: 100,
)
: Container()
],
),
),
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(7.0),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.09),
offset: Offset(0.0, -2.0),
blurRadius: 12.0,
),
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.09),
offset: Offset(0.0, 6.0),
blurRadius: 12.0,
),
],
),
),
);
You can use ExpansionPanel to achieve your results
List<bool> isExpanded = []; //the size/length should be equal to the size of your data list
ExpansionPanelList(children: [
//generate the panels from your data list
ExpansionPanel(
headerBuilder: (context, isExpanded) {
return _headerHere();
},
body: _bodyHere(),
isExpanded: isExpanded[0], //index of your card
canTapOnHeader: true,// to make the complete header clickable
)
],
expansionCallback: (panelIndex, expanded) {
setState(() {
isExpanded[panelIndex] = !expanded;
});
},
),

Flutter Card Layout

So I'm new to flutter, and I'm trying to make a card. But I can't seem to get my desired output.
I tried to separate the different widgets, by using rows and columns, but I kept messing it up.
This is my target output
Target output
This is my current progressCurrent progress
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildhomePageAppBar(),
body: buildExhibitorBody(),
);
}
Widget buildExhibitorBody() {
return Container(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
buildExhibitorText(),
SizedBox(
height: 10,
),
buildExhibitorCards(),
SizedBox(height: 10),
],
),
),
);
}
Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
backgroundColor: Colors.white,
titleSpacing: 0,
title: Padding(
padding: EdgeInsets.only(
left: 20,
),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Image(
image: AssetImage('assets/images/plain_logo.png'),
height: 30,
),
),
SizedBox(width: 5),
Text(
'Virtex',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
)
],
),
),
actions: [
Padding(
padding: EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Container(
height: profileDimension,
width: profileDimension,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black54,
width: 2,
),
borderRadius: BorderRadius.circular(50),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image(
width: profileDimension,
height: profileDimension,
image: AssetImage(
'assets/images/profile-image.jpeg',
),
fit: BoxFit.cover,
),
),
),
),
SizedBox(width: 20),
],
);
}
Widget buildExhibitorText() {
return Padding(
padding: EdgeInsets.only(
left: 20,
right: 20,
top: 20,
bottom: 10,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
"Exhibitors",
textAlign: TextAlign.justify,
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.2,
fontSize: 20.0,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
);
}
Widget buildExhibitorCards() { // I think my problem is I don't know how to do the layout here
return Container(
width: 400,
height: 150,
child: Column(children: <Widget>[
Card(
elevation: 1,
child: Padding(
padding: const EdgeInsets.only(),
child: Row(children: [
buildCardImage(),
buildCardExhibitor(),
buildCardIndustry(),
buildCardGo(),
])),
),
]),
);
}
Widget buildCardExhibitor() {
return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
padding: EdgeInsets.all(10),
width: 40,
height: 40,
child: Center(
child: Row(
children: <Widget>[
Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
Text('Exhibitor Name')
],
),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
),
]);
}
Widget buildCardImage() {
return Container(
height: 100,
width: 100,
child: Image(
image: AssetImage('assets/images/onboarding-2.jpg'),
height: 100,
),
);
}
Widget buildCardIndustry() {
return Padding(
padding: EdgeInsets.only(
left: 40,
right: 40,
),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
"Industry 1",
style: TextStyle(
fontFamily: "DMSans",
color: Colors.grey,
letterSpacing: 0.3,
fontSize: 12,
),
),
Text(
"Industry 2",
style: TextStyle(
fontFamily: "DMSans",
letterSpacing: -0.3,
fontSize: 12,
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
);
}
Widget buildCardGo() {
return Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 5),
IconButton(
icon: Icon(
MdiIcons.fromString('arrow-right'),
size: 30,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
]);
}
}
I would greatly appreciate any kind of help.
Look:
My own Code
import 'package:flutter/material.dart';
class CardLayout extends StatelessWidget {
Widget buildCardImage = Container(
margin: EdgeInsets.only(right: 10.0),
width: 150,
height: 150,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/250?image=9"),
),
),
);
Widget buildCardExhibitor =
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.red,
),
child: Text(
"EN",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
width: 10.0,
),
Text(
'Exhibitor Name',
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
]);
Widget buildCardIndustry = Padding(
padding: EdgeInsets.all(8.0),
child: Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 1',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
SizedBox(
width: 10.0,
),
Container(
padding:
EdgeInsets.only(left: 10.0, right: 10.0, top: 5, bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(100),
),
color: Colors.blueGrey.shade400,
),
child: Text(
'Industry 2',
style: TextStyle(
fontFamily: "DMSans",
color: Colors.white,
letterSpacing: 0.3,
fontSize: 12,
),
),
),
],
),
),
);
Widget buildCardGo = Row(mainAxisAlignment: MainAxisAlignment.end, children: [
Text(
'Go to Booth',
style: TextStyle(
color: Colors.blue,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(width: 3),
IconButton(
icon: Icon(
Icons.arrow_forward_rounded,
size: 30,
color: Colors.blue,
),
onPressed: () {
//Navigator.pop(context);
},
),
]);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Exhibitor'),
actions: [
IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
})
],
),
body: Container(
margin: EdgeInsets.only(top: 10.0),
width: MediaQuery.of(context).size.width,
//height: 150.0, // remove this line -------------- (1) [EDIT]
child: Column(
// wrap card with column and add listtile as children -------------- (2) [EDIT]
children: [
ListTile(
leading: Text('Exhibitor'),
trailing: IconButton(
icon: Icon(Icons.filter_list_rounded),
onPressed: () {
Navigator.pop(context);
}),
),
Card(
elevation: 5.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(5.0),
child: Row(
children: <Widget>[
buildCardImage,
Expanded(
child: Column(
children: <Widget>[
buildCardExhibitor,
buildCardIndustry,
buildCardGo
],
))
],
),
),
),
],
),
),
));
}
}