Run the ontap() gesture on the card in flutter - android

I have been trying to run the onTap() function from material package of flutter but it seems to throw me this error:
"The following assertion was thrown while handling a gesture:
Navigator operation requested with a context that does not include a Navigator."
I am in need of running this function to reach out to the called function of new screen in the application.
The code is below:
class _HomePageState extends State<dashboardpage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Container(
height:130*.99,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: AssetImage('assets/bismillah.png'),fit: BoxFit.fitHeight,
)
),
),
SafeArea(
child: Padding(
padding: EdgeInsets.only(top: 0),
child: Column(
children:<Widget> [
Container(
height: 100.0,
child: Row(
children:<Widget> [
Center(
child: SizedBox(
width: 90.0,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end
)
],
),
),
Expanded(
child:GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
)
),
),
),
)
]
);
}
}
This is the code specimen and the code is stuck on onTap() line.
Please help me!


Use GestureDetector
GestureDetector(onTap:(){
Navigator.push(context, MaterialPageRoute(builder: (context)=> kafiroun()));
},
child: Padding(
padding: const EdgeInsets.only(top: 60),
child: InkWell(
child: Card(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/kafiroun/kafirun.jpg',height: 80),
Text('सूरा अल काफिरून',style: TextStyle(fontWeight: FontWeight.bold,color: Colors.black87))
]
),
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)
),
elevation: 5.0,
),
)
),
)

Related

Flutter ListView is not visible or hidden

I am trying to make ListView for my app. when I add listview, listview is not visible or showing.
INFO
Flutter version: 3.3.8
Engine revision 857bd6b74c
Dart version 2.18.4
DevTools version 2.15.0
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Expanded(
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
),
)
],
),
)
],
),
)
],
)
)
);
}

Please remove unnecessary widgets like Expanded(), Column(), etc. You don't need to use those widgets cause you use ListView(), ListView() itself takes multiple children. So you won't need to use Column() or Expanded() inside of ListView(). Here is the full solution
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png"),
),
borderRadius: BorderRadius.circular(20.0)),
),
const Text("Pineapple")
],
)
],
),
)
],
),
),
),
);
}

Add property "primary: false"
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
Expanded(
child: ListView(
shrinkWrap: true,
primary:false,
children: [
Expanded(
child: Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
),
)
],
),
)
],
),
)
],
)
)
);
}

Just Remove Expand() Widget
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
primary: false,
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage("..."),
),
borderRadius: BorderRadius.circular(20.0)),
),
const Text("Pineapple")
],
)
],
)
],
),
)
],
)));

Remove Expanded Widgets
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Container(
padding: const EdgeInsets.only(left: 20, top: 50),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(0),
child: Column(
children: [
ListView(
shrinkWrap: true,
primary:false,
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
image: const DecorationImage( image: NetworkImage("..."), ),
borderRadius: BorderRadius.circular(20.0)
),
),
const Text("Pineapple")
],
)
],
)
],
),
)
],
)
)
);
}

How to change the color of just ONE button when the button is clicked from a container with 9 buttons Flutter

So I have a container with 9 ElevatedButtons (code shown below) i would like to change the color of the selected button, but there can only be 1 selected button at a time, how would i go about doing this? So if one button is selected the button will go green, but if another button in the container is clicked it will revert back the color of the previously selected color and change the current selected button to green.
here is the container with the elevated buttons:
Container(
padding: EdgeInsets.all(25),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.white),
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("10.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("20.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("50.000"))),
),
),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("100.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("250.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("500.000"))),
),
),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("750.000"))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("1.000.000", style: TextStyle(fontSize: 13)))),
),
),
),
SizedBox(width: 10),
Expanded(
child: Material(
elevation: 2,
child: InkWell(
onTap: (){},
child: Container(
padding: EdgeInsets.all(15),
child: Center(child: Text("2.000.000", style: TextStyle(fontSize: 13)))),
),
),
),
],
),
],
),
),
If i have to guess I would think I would need to put it inside of a map, but I'm not sure how to go about doing this. I would prefer to learn the manual implementation but if needed i'm fine with using packages if needed.

For this work You can use ChoiceChip instead of using Material Button directly
A material design choice chip.
ChoiceChips represent a single choice from a set. Choice chips contain
related descriptive text or categories.
class MyThreeOptions extends StatefulWidget {
const MyThreeOptions({Key? key}) : super(key: key);
#override
State<MyThreeOptions> createState() => _MyThreeOptionsState();
}
class _MyThreeOptionsState extends State<MyThreeOptions> {
int? _value = 1;
#override
Widget build(BuildContext context) {
return Wrap(
children: List<Widget>.generate(
3,
(int index) {
return ChoiceChip(
label: Text('Item $index'),
selected: _value == index,
onSelected: (bool selected) {
setState(() {
_value = selected ? index : null;
});
},
);
},
).toList(),
);
}
}

create a new StatefulWidget and just return a button inside that. call the functions and api's in that file only. and call this class name as the child instead ofyour old button. Works for me.

Why cant i add Listview to Flutter ? (The relevant error-causing widget was Column)

When I try to add listview, its always gives me errors. Like:
RenderBox was not laid out: RenderRepaintBoundary#dab18 NEEDS-LAYOUT NEEDS-PAINT
Failed assertion: line 1982 pos 12 : 'hasSize'
The relevant error-causing widget was Column
I tried to add shrinkwrap to listview but it doesn't work too. When I delete my listview its works fine but I need to add it. What am I making wrong? Thanks for all your help! My code :
SliverToBoxAdapter(
child: Container(
child: Column(children: [
Container(
width: double.infinity,
child: Stack(
children: [
CorneredImage(
child: Image(
image: AssetImage(
'assets/images/phone-call.png',
),
),
),
Positioned.fill(
child: Container(
decoration: //some decors
),
),
Positioned.fill(
child: Container(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.all(24),
child: FractionallySizedBox(
widthFactor: 0.7,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Flexible(
child: Column(
children: [
Text(
"Dilediğiniz Yerden Bağlanın!",
),
SizedBox(height: 10),
Text(
"Terapizone, ihtiyacınız olduğu her an size destek olmak için yanınızda!",
),
],
),
),
Align(
alignment: Alignment.bottomLeft,
child: ElevatedButton(
onPressed: () {},
child: Text("Terapiye Başla"),
)
],
),
),
),
),
)
],
),
),
Flexible( //When I add that part its not working anymore. List is simple String list
child: ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) => Text(list[index]))),
]),
),
),

Try This,
CustomScrollView( // Wrap SliverToBoxAdapter with CustomScrollView
shrinkWrap: true,
slivers: <Widget>[
SliverToBoxAdapter(
child: Container(
child: Column(mainAxisSize: MainAxisSize.min, // give mainAxixsize
children: [
Container(
width: double.infinity,
child: Stack(
children: [
Image(
image: AssetImage(
'assets/images/phone-call.png',
),
),
Positioned.fill(
child: Container(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.all(24),
child: FractionallySizedBox(
widthFactor: 0.7,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Column(
children: [
Text(
"Dilediğiniz Yerden Bağlann!",
),
SizedBox(height: 10),
Text(
"Terapizone, ihtiyacnz olduğu her an size destek olmak için yannzda!",
),
],
),
),
Align(
alignment: Alignment.bottomLeft,
child: ElevatedButton(
onPressed: () {},
child: Text("Terapiye Başla"),
))
],
),
),
),
),
)
],
),
),
Flexible( //When I add that part its not working anymore. List is simple String list
child: ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) => Text(list[index]))),
]),
),
),
// SizedBox(height: 1) // <-- Divider
],
)

setState() called after dispose(): _StatefulBuilderState#09642(lifecycle state: defunct, not mounted)

I'm showing content with bottomsheet, i'm updating folder size after calculating it, using statefulbuilder's setState, i used mounted condition also, then also it showing setState after called dispose, Help me to solve this.
FileStat fileStat = selectedFilesAndFolders.last.statSync();
String size = '0 KB';
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0),
topRight: Radius.circular(12.0),
)),
builder: (context) {
return StatefulBuilder(builder: (context, newSetState) {
getFolderSize(selectedFilesAndFolders.last.path).then((value) {
if (!mounted) return;
newSetState(() {
size = value;
});
});
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 2.0,
),
Text(
'Info',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Name: '))),
Expanded(
child: Text(path
.basename(selectedFilesAndFolders.last.path)))
],
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Size: '))),
Expanded(child: Text(size)),
],
),
SizedBox(
height: 2.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Last Modified Date: '))),
Expanded(child: Text(fileStat.modified.toString()))
],
),
SizedBox(
height: 2.0,
),
],
),
);
});
});

try the following
if (!mounted){
setState(() {
size = value;
}),
};

Improve overall layout on ListView of Rows

I'm trying to implement a ListView of Rows like this:
And this is my code:
import 'package:flutter/material.dart';
import 'package:good_driver_app/common/ExpandedButton.dart';
class ServicePetrolPage extends StatefulWidget {
// HomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
// final String title;
#override
_ServicePetrolPage createState() => _ServicePetrolPage();
}
class _ServicePetrolPage extends State<ServicePetrolPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('Petrol'),
),
body: Container(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo",
),
),
Flexible(
child: new Text(
"Location",
),
),
Flexible(
child: new Text(
"Distance",
),
),
Flexible(
child: new Text(
"\$",
),
),
Flexible(
child: new Text(
"Facilities",
),
),
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 1",
),
),
Flexible(
child: new Text(
"Johnson Rd",
),
),
Flexible(
child: new Text(
"0.2 KM",
),
),
Flexible(
child: new Text(
"\$12.45",
),
),
Flexible(
child: new Text(
"ATM, Restaurant",
),
),
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 2",
),
),
Flexible(
child: new Text(
"Hennessy Rd",
),
),
Flexible(
child: new Text(
"0.5 KM",
),
),
Flexible(
child: new Text(
"\$12.88",
),
),
Flexible(
child: new Text(
"ATM",
),
),
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 3",
),
),
Flexible(
child: new Text(
"Lockhart Rd",
),
),
Flexible(
child: new Text(
"1.2 KM",
),
),
Flexible(
child: new Text(
"\$12.88",
),
),
Flexible(
child: new Text(
"Toilet",
),
),
],
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row (
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 4",
),
),
Flexible(
child: new Text(
"Canal Rd",
),
),
Flexible(
child: new Text(
"1.2 KM",
),
),
Flexible(
child: new Text(
"\$12.90",
),
),
Flexible(
child: new Text(
"Restaurant, Toilet",
),
),
],
),
),
)
],
),
),
],
),
),
);
}
}
And this is the result:
My questions are:
How to put horizontal gap between cells?
How to reduce the gap between rows?

This is how I'd do it.
ServicePetrolPage
class ServicePetrolPage extends StatefulWidget {
#override
_ServicePetrolPage createState() => _ServicePetrolPage();
}
class _ServicePetrolPage extends State<ServicePetrolPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Petrol'),
),
body: Container(
child: ListView(
children: <Widget>[
DataView(
distance: 'Distance',
facilities: ['Facilities'],
location: 'Location',
logo: ' Logo ',
price: '',
),
DataView(
logo: 'Logo 1',
location: 'Johnson Rd',
distance: '0.2 KM',
facilities: ['ATM', 'Restaurant'],
price: '12.45',
),
DataView(
logo: 'Logo 2',
location: 'Hennessy Rd',
distance: '0.5 KM',
facilities: ['ATM'],
price: '12.88',
),
DataView(
logo: 'Logo 3',
location: 'Lockhart Rd',
distance: '1.5 KM',
facilities: ['Toilet'],
price: '12.88',
),
DataView(
logo: 'Logo 4',
location: 'Canal Rd',
distance: '1.2 KM',
facilities: ['Restaurant', 'Toilet'],
price: '12.90',
),
],
),
),
);
}
}
DataView
class DataView extends StatelessWidget {
final String logo;
final String location;
final String distance;
final String price;
final List<String> facilities;
DataView({
this.location,
this.distance,
this.facilities,
this.logo,
this.price,
});
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text("$logo"),
Expanded(
flex: 2,
child: Center(child: Text("$location")),
),
Expanded(
flex: 1,
child: Center(child: Text("$distance")),
),
Expanded(
flex: 1,
child: Center(child: Text("\$$price")),
),
Expanded(
flex: 1,
child: Wrap(
alignment: WrapAlignment.center,
children: <Widget>[
if (facilities != null)
...facilities.map((facility) {
return Padding(
padding: const EdgeInsets.all(0.0),
child: Text(
'$facility ',
overflow: TextOverflow.ellipsis,
),
);
}).toList(),
],
),
),
],
),
);
}
}
Since I am using List unwrapping syntax you will have to update your
SDK constraints in pubspec.yaml
pubspec.yaml
.
.
environment:
sdk: ">=2.2.2 <3.0.0"

1- Add a Container and set the height to 1 with a color you want (between each container row).
Container(
height: 1,
color: Colors.black,
),
2- Reduce the padding, I will change this padding: EdgeInsets.all(10) to this padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2)
Final code:
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('Petrol'),
),
body: Container(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo",
),
),
Flexible(
child: new Text(
"Location",
),
),
Flexible(
child: new Text(
"Distance",
),
),
Flexible(
child: new Text(
"\$",
),
),
Flexible(
child: new Text(
"Facilities",
),
),
],
),
),
)
],
),
),
Container(
height: 1,
color: Colors.black,
),
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 2),
height: 50.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 1",
),
),
Flexible(
child: new Text(
"Johnson Rd",
),
),
Flexible(
child: new Text(
"0.2 KM",
),
),
Flexible(
child: new Text(
"\$12.45",
),
),
Flexible(
child: new Text(
"ATM, Restaurant",
),
),
],
),
),
)
],
),
),
Container(
height: 1,
color: Colors.black,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 2",
),
),
Flexible(
child: new Text(
"Hennessy Rd",
),
),
Flexible(
child: new Text(
"0.5 KM",
),
),
Flexible(
child: new Text(
"\$12.88",
),
),
Flexible(
child: new Text(
"ATM",
),
),
],
),
),
)
],
),
),
Container(
height: 1,
color: Colors.black,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 3",
),
),
Flexible(
child: new Text(
"Lockhart Rd",
),
),
Flexible(
child: new Text(
"1.2 KM",
),
),
Flexible(
child: new Text(
"\$12.88",
),
),
Flexible(
child: new Text(
"Toilet",
),
),
],
),
),
)
],
),
),
Container(
height: 1,
color: Colors.black,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(15.0),
height: 50.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: new Text(
"Logo 4",
),
),
Flexible(
child: new Text(
"Canal Rd",
),
),
Flexible(
child: new Text(
"1.2 KM",
),
),
Flexible(
child: new Text(
"\$12.90",
),
),
Flexible(
child: new Text(
"Restaurant, Toilet",
),
),
],
),
),
)
],
),
),
Container(
height: 1,
color: Colors.black,
),
],
),
),
);
}

Categories

Resources