Below is an example of some code I found online. It builds a horizontally scrollable ListView on top of a Google Maps. I want to be able to click on markers and then add places details into the ListView boxes. The code below is static. I'd like to populate each ListView box with information from Google Places API like business website, opening hours, etc. I can't find how to do this anywhere. Thanks for your help.
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
const SizedBox(width: 10.0),
Padding(
padding: const EdgeInsets.all(8.0),
child: _boxes(
"https://lh5.googleusercontent.com/p/AF1QipO3VPL9m-b355xWeg4MXmOQTauFAEkavSluTtJU=w225-h160-k-no",
40.738380,
-73.988426,
"Gramercy Tavern"),
),
And then the _boxes widget:
Widget _boxes(String _image, double lat, double long, String restaurantName) {
return GestureDetector(
onTap: () {
_markers;
},
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: const Color(0x802196F3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
SizedBox(
width: 180,
height: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(24.0),
child: Image(
fit: BoxFit.fill,
image: NetworkImage(_image),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: myDetailsContainer1(restaurantName),
),
],
)),
),
);
}
Related
I have a problem: https://streamable.com/fw7x21 . As you can see, the Images load lazy. On the first time, I think I can fix this with a Splash Screen. But when I leave the app for only 3 seconds or less, and go back in, it loads all images again from new. This look strange. Is there a way of handling this issue? I mean, my performance can't be the reason for that. I only have a Scroll View with a InkWell with an Image.asset as a child:
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
borderRadius: BorderRadius.circular(10),
elevation: 8,
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: ColorFiltered(
colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.darken),
child: Image.asset("assets/widgetsImages/calc.png"),)),
Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
"title",
style: GoogleFonts.robotoCondensed(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32,
),
),
),
],
)),
),
),
I need something that safe the pictures inside the cache, so the storage can better manage to load the pictures.
I am trying to use a Stack() Widget within a Listview to display Widgets over an Image in each iteration of the Listview however I am running into an issue. Whenever I use Align() for any widgets they stay at the top and do not Align to the Bottom of the Container()
Each image is a different size so I can not define a definite size to apply to all.
The code below aligns alignedWidget() to the topLeft even though I coded it to Align to bottomLeft
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: ListView.builder(
itemCount: widget.posts.length,
itemBuilder: (context, index) {
return listViewCard(images[index])
}
),
)
Widget listViewCard(image) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(18.0),
child: Image(image: NetworkImage(image), fit: BoxFit.fitWidth, )
),
),
child: Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Row(
children: [
alignedWidget(),
],
),
)
),
],
),
);
}
}
I'm not sure what exactly you're trying to accomplish. But to position widgets within a Stack, you can use a Positioned widget:
Stack(children: [
Positioned(bottom: 0.0, left: 0.0, child: ...)
])
I have created a page with a side drawer which when pressed on the magnifying glass icon opens search requirements for different recipes e.g vegetarian, gluten free etc. I want the recipes to be shown on the page once the side drawer is closed.
I have created a widget called RecipeList() which has all of the code to retrieve the recipes from API and works perfectly on its own page without a side drawer. I wish to call this RecipeList() widget so that when the side drawer is closed they are displayed.
I'm having an error on the 7th line from the bottom, calling the RecipeList() widget it says "1 positional argument(s) expected, but 0 found.Try adding the missing arguments." I feel like I'm missing something that may be pretty obvious to fresh eyes?
Please see this images as references in case I didn't explain it well enough :)
HOW I WISH FOR THE RECIPES TO BE DISPLAYED WHEN THE SIDE BAR IS CLOSED (THIS WORKS ON A PAGE WITHOUT THE SIDE BAR):
CURRENTLY HOW THE SIDE BAR OPENS:
THE PAGE I WISH FOR THE RECIPES TO BE DISPLAYED ON:
//SIDE DRAWER BUILD
Widget build (BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
body: SwipeDrawer(
radius: 20,
key: drawerKey,
hasClone: false,
bodyBackgroundPeekSize: 30,
backgroundColor: Colors.white,
drawer: buildDrawer(),
child: buildBody(),
),
);
}
//WIDGET RESPONSIBLE FOR SHOWING RECIPES FROM API
Widget RecipeList(BuildContext context) {
return Scaffold(
body:
mapResponse==null?Container(): SingleChildScrollView(
child:Column(
children: <Widget> [
ListView.builder(
//SHRINKWRAP ADJUSTS THE BOXES TO FIT THE SCREEN
shrinkWrap: true,
itemBuilder: (context,index){
return Container(
//RECIPE PAGE LAYOUT DESIGN
//EACH RECIPE IS SHOWN WITH ITS TITLE & CALORIES IN A LITTLE RECTANGLE WITH IMAGE
//SETTING UP EACH RECIPE RECTANGLE PLACE HOLDER
margin: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
width: MediaQuery.of(context).size.width,
height: 180,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.6),
offset: Offset(0.0,10.0,),
blurRadius: 10.0,
spreadRadius: -6.0,
),
],
//EACH RECIPES IMAGE GOES HERE
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.35),
BlendMode.multiply,
),
//IMAGE IS FETCHED FROM API
image: NetworkImage(listOfResults[index]['image']),
fit: BoxFit.cover,
),),
//EACH RECIPES TITLE IS HERE
child: Stack(
children: [
Align(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 5.0),
child: Text(
//TITLE IS FETCHED FROM API
listOfResults[index]['title'],
style: TextStyle(
fontSize: 19,
color: Colors.white.withOpacity(1.0)
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.center,
),
),
alignment: Alignment.center,
),
//EACH RECIPES CALORIES IS HERE
Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(5),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.4),
borderRadius: BorderRadius.circular(15),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Icon(Icons.star,color: Colors.yellow,size: 18),
SizedBox(width: 7),
Text(
//CALORIES IS FETCHED FROM API
listOfResults[index]['spoonacularScore'].toString(),
style: TextStyle(
color: Colors.white.withOpacity(1.0)),
),
],
),
),
Container(
padding: EdgeInsets.all(5),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.4),
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
Icon(
Icons.schedule,
color: Colors.yellow,
size: 18,
),
SizedBox(width: 7),
Text(listOfResults[index]['readyInMinutes'].toString(),
style: TextStyle(
color: Colors.white.withOpacity(1.0)),),
],
),
)
],
),
alignment: Alignment.bottomLeft,
)]
) );
},
//IF THE LIST OF RESULTS RETRIEVED FROM API IS NONE, ITEMCOUNT IS EQUAL TO 0. OTHERWISE ITEMCOUNT IS EQUAL TO LENGTH OF THE LIST OF RESULTS
itemCount: listOfResults==null ? 0 : listOfResults.length)
],
),
));
}
//DISPLAY RECIPES ON PAGE SCREEN FROM API SEARCH
Widget buildBody() {
return Column(
children: [
// build your appBar
AppBar(
title: Text('Recipes'),
leading: InkWell(
onTap: () {
if (drawerKey.currentState.isOpened()) {
drawerKey.currentState.closeDrawer();
} else {
drawerKey.currentState.openDrawer();
}
},
child: Icon(Icons.search)),
),
//MAIN SCREEN
Expanded(
child: Container(
color: Colors.white,
child: RecipeList(),
),
),
],
);
}
}
The error explanation is that you defined RecipeList like this:
Widget RecipeList(BuildContext context)
And you call constructor like this:
child: RecipeList(),
As you pass no parameter you got this error, you need to suppress positionnali parameter in Widget définition or pass parameter when you instanciate Widget.
Is there a widget in Flutter which adjusts itself on the content of it's children which are in Rows and Columns?
I can't seem to find anything related, and I am constantly hit with infinite overflows errors.....
As an example, lets say I would have 3 Widgets in a Row, 1 of which is a text, which I cannot guess how long it will be, but I need to expand the parent as much as the widget needs and at the sametime wrap the text
I would have something like:
Row(
children: [
Expanded(child: Widget1(....)),
Expended(child: Text(.....)),
Expanded(child: Widget2(....))
]
)
Right?
I would want the parent of the row to expand as much as it needs for the children to be shown, I want to align Widget1 and Widget2 in different ways (1-center, 2-bottom).
If I put them in Column I can center Widget1, but I cannot put Widget2 at the bottom because if I put Column to max size it overflows, if I don't it doesn't align...
How would you do it?
I really don't understand the logic behind the inifnite layout thing....
For example, here is where I am stuck at the moment.
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Global.findCategory(event.categId).color.withAlpha(150),
blurRadius: 20,
spreadRadius: -20,
offset: Offset(0, 5)
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(30)
),
child: Row(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
width: Global.scaleSmallDevice(context) * 64,
height: Global.scaleSmallDevice(context) * 64,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: event.image
)
)
),
)
,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CustomText(
text: title,
color: Global.findCategory(event.categId).color,
fontSize: 16,
),
Flexible(
child: CustomText(
text: shortInfo,
color: Global.findCategory(event.categId).color,
fontSize: 12,
),
)
],
),
),
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: StatefulBuilder(
builder: (context, setState) {
IconData buttonIcon = (event.favorite) ? Icons.favorite : Icons.favorite_border;
return SplashButton(
splashColor: Global.findCategory(event.categId).color,
child: Icon(buttonIcon, color: Global.findCategory(event.categId).color, size: 30),
onTap: () async {
await event.setFavorite(context);
setState(() {
buttonIcon = (event.favorite) ? Icons.favorite : Icons.favorite_border;
});
}
);
},
),
),
],
),
),
],
);
}
In this case I want the StatefulBuilder widget to be on the bottom and the entire container be as small as the column with the CustomText widgets.
The widget with image inside I want it to be centered, while the text to be fully available to the user.
If I don't add a Column as Container, it goes as the height allows it and the StatefulBuilder widget center itself at the bottom, in the curent code it's at the center.....
Sorry if I'm not coherent, it's a bit late and I am tired after coding all day and stuck at this widget for a few hours.
I'm attempting to layout some buttons in a flutter app towards the bottom of the screen as seen here:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/foo.jpeg'),
fit: BoxFit.cover),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: _buttonsOne(),
),
Expanded(
child: Text(''),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: _buttonsTwo(),
),
],
),
),
);
Counter buttons is setup thusly:
Widget _buttonsTwo() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_oneButton(),
_twoButton(),
_threeButton(),
_fourButton()
],
);
}
My problem is two of the buttons are using glyphs that cause them to be just right of center. Prior to attempting this layout I structured raised buttons with columns so that I could use an Align to pull these icons to the left a bit, as seen here for one of the buttons:
Widget _threeButton() {
return RaisedButton(
onPressed: () {},
elevation: 10,
color: Colors.red,
textColor: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Align(
alignment: Alignment(-0.4, 0),
child: Icon(
Class.icon_name,
size: 30,
),
),
Text(
_fooCount.toString(),
style: TextStyle(fontSize: 25),
)
],
),
);
}
And here's the result I'm getting:
As you can see, the icons for the two rightmost buttons are still a little to the right. I've tried using RaisedButton.icon to no avail as it causes the icons to overlap the text, even restructuring them in a row to try and make wider buttons. What am I missing?
Try using Transform widget instead of Align and translate the X axis:
Transform(
transform: Matrix4.identity()..translate(-7.0),
child: Icon(
FiveRingsDB.conflict_political,
size: 30,
),
),
Text(
_militaryCount.toString(),
style: TextStyle(fontSize: 25),
)