Flutter Card Layout
583
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
],
))
],
),
),
),
],
),
),
));
}
}
Author by
Admin
Updated on December 18, 2022Comments
-
Admin over 1 year
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.
-
Admin almost 3 yearsThank you so much for the help kind sir. May I ask how can I place the Exhibitor text and Filter Icon to the top of the card?
-
Rajendra A Verma almost 3 yearsI just Edited. see code once, step 1 - wrap card with column and step 2 - add ListTile as children of column (above of card).
