I am trying to style ExpansionPanel which is inside ExpansionPanelList in Flutter but the background image is not applying to the whole header area of the panel.
I want to apply background image on the headerbuilder of expansionPanel.
Currenlty I'm trying to do it with the help of stack and giving background image to it. Doing this, Image is covering most of the header builder area but not covering area below arrow of expansionPanel.
I want the background image to also cover area underneath arrow of the expansion panel. How can I do that?
ExpansionPanelList(
expansionCallback: (index, isExpanded) { // Some code },
children: _items.map((MyItem _item) {
return ExpansionPanel(
canTapOnHeader: true,
backgroundColor: Colors.yellow,
// Want to add the picture in the background of
// header builder
headerBuilder: (context, isExpanded) {
return Stack(
children: [
// >>>>>>>>>>>>>> Image
Container(
child: Image.network(
_item.prodCtgData
.pic,
width: double.infinity,
fit: BoxFit.fitWidth,
),
),
// >>>>>>>>>>>>>> Text
Container(
alignment: Alignment.centerLeft,
child: Text("Data"),
),
],
);
},
isExpanded: _item.isExpanded,
body: GridView.count(
shrinkWrap: true,
physics:
NeverScrollableScrollPhysics(),
crossAxisCount: 4,
children:[
//Some data
]
),
);
}).toList(),
),
Related
I'm currently using a custom widget similar to this chips_input library. However, I don't want to give the options view (the popup list) a static maximum height. What I want to achieve is to dynamically set a maximum height of screen height - popup y offset. In this way, bottom of the options view will be at the bottom of the screen and all of the content inside the options view will be visible through scrolling. Is there any that I can access the textfield's or options view's offset to calculate the height?
My autocomplete widget looks similar to this:
RawAutocomplete<T>(
...
optionsViewBuilder: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: textFieldWidth,
child: Material(
elevation: 16,
child: ListView.builder(
shrinkWrap: true,
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final T option = options.elementAt(index);
return suggestionBuilder(context, option);
},
),
),
),
),
);
You can do this by putting a height on your SizedBox that uses MediaQuery to get the screen height:
popupOffset = 20;
RawAutocomplete<T>(
...
optionsViewBuilder: Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: textFieldWidth,
height: MediaQuery.of(context).size.height - popupOffset,
child: Material(
elevation: 16,
child: ListView.builder(
shrinkWrap: true,
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final T option = options.elementAt(index);
return suggestionBuilder(context, option);
},
),
),
),
),
);
how to make the picture zoomable when the photo is clicked, here's the code I made to display the image
Column(
children: [
image11 != null
? Image.file(
image11,
width: 50,
height: 50,
fit: BoxFit.cover,
)
: Text(" Bagian Belakang"),
Container(
margin: const EdgeInsets.fromLTRB(14, 5, 0, 0),
child: RaisedButton(
padding: EdgeInsets.all(10),
onPressed: () {
pickImage11(ImageSource.camera);
},
child: Icon(Icons.camera),
),
),
],
),
Taking inspiration from this answer Hero animation with an AlertDialog
You can use a Hero widget combined with a PageRouteBuilder to imitate a zoom feature:
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
barrierDismissible:true,
pageBuilder: (BuildContext context, _, __) {
return Hero(
tag: "zoom",
child: Image.file(...),
);
}
)
);
EDIT: I found barrier dismissable not working and found the solution here: Flutter SizeTransition and PageRouteBuilder not working
You will have to wrap the Hero widget with a defined width and height to get the optimum zoom level.
I am making a reader app and I have a ListView.builder which is loading multiple Images from the API. Now I want to add a layer on top of the ListView with 2 transparent containers so that when I click the left container the list goes up and when I click the right container the list goes down. I tried adding the ListView to stack but then the scrolling ability of the list is gone. This is my code so far:
return Scaffold(
body: Stack(
children: [
ListView.builder(
controller: _scrollViewController,
cacheExtent: 1000,
itemCount: _picLinkMap.length,
itemBuilder: (BuildContext ctx, int index) {
return buildImageLoader(
_picLinkMap[index], index + 1);
},
),
Row(
children: [
GestureDetector(
child: Container(
width: mySize.width * 0.5,
color: Colors.black38,
),
onTap: () {
print("Tap Left");
},
),
GestureDetector(
child: Container(
width: mySize.width * 0.5,
color: Colors.red.withOpacity(0.5),
),
onTap: () {
print("Tap RIGHT");
},
),
],
),
],
),
);
I only want to scroll about half the height of the screen on tap.
I searched the web but did not find a suitable solution.
ScrollController _scrollViewController = ScrollController();
...
var jumpTo = (MediaQuery.of(context).size.height - 104)/2;
//104 is random number for the rest of the screen widgets (e.g. appbar ..)
_scrollViewController.jumpTo(jumpTo); //pixel value
...
ListView.builder(
controller: _scrollViewController,
I have a horizontal ListView and depending on the app state, there might be 1-2 items in the list or many.
Now, I want to have the items centered as long as there are only a few available and scrolling is not needed. So far my items always stick to the left side as you can see in the ListView with the lime background color. That one I wanted centered, even if 2 or 3 items are visible, but with more, it shall scroll and then start at the left side with listing the items.
return Container(
color: Colors.lime,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: listItems));
the items itself are this:
Widget getPersonCircleWidget(BuildContext context, Person p) {
return Container(
color: Colors.transparent, //yellow,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: CircularProfileAvatar('',
child: Image(
fit: BoxFit.cover,
image:
UserPhotoManager.singleton.getUserProfilePhoto(p.userId)),
borderColor: colorCirclePhotoBorder,
borderWidth: 2,
elevation: 10,
radius: 40,
onTap: () {
....
}),
),
);
}
Any idea how to solve this?
Just wrap your ListView with Center widget.
Center(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: listItems.map<Widget>((a) => CircleAvatar(
child: Text(a))).toList(),
),
),
When ListView exceed available room on the screen it will automatically left aligned.
Try it on dartpad.
I have a Stack that has some containers and horizontal listView at the very bottom of it.(Intentionally, it's a part of design). Now that I'm trying to scroll through it, it doesn't work because top container make it unreachable sort of. How can I remain the same widget tree but make the bottom listView scrollable?
return Stack(
children: <Widget>[
AnimatedBuilder(
animation: ctrl,
builder: (context, child){
var pos = ctrl.position.pixels;
return Container(
height: pos<h?(pos/h * 250):250,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (ctxt, index){
return Container(
height: pos<h?(pos/h * 250):250,
width: 250,
child: Image(), //Horizontal listview
);
},
),
);
},
),
ListView(
controller: ctrl,
children: <Widget>[
AnimatedBuilder(
animation: ctrl,
builder: (context, child){
var pos = ctrl.position.pixels;
return Container(
height: pos<h?(pos/h * 250):250,
);
},
),
//This is the container I'm talking about, it's just like padding(It's nothing in there)
],
),
],
);
You could put the ListView after the Container in the order inside the Stack, so it will be over the Container and you can interact with it.
Or you could wrap the Container with IgnorePointer, so the gestures won't be intercepted by the Container and you could interact with the ListView.