Not all list are visible in body under SlideUpPanel
In list I am having 83 items but last 2~3 items are not visible
SlidingUpPanel(
minHeight: 50,
body: Container(
height: MediaQuery.of(context).size.height-100, //No effect
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
panel: Container(
color: Colors.black,
),
)
If you go into the source code of SlidingUpPanel, you can see that it is using the screen size to set the width and height of the body:
// Inside SlidingUpPanel's build() method:
// ... other lines
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: widget.body,
),
// ... other lines
This is why when you add an AppBar and other elements in the screen, it will reposition the body but the body's height is still equal to the screen height. One workaround is to use a Stack instead of setting the body of the SlidingUpPanel. Something like:
#override
build(context) {
var _collapsedHeight = 50.0;
return Stack(
children: [
Container(
// Set the padding to display above the panel
padding: EdgeInsets.only(bottom: _collapsedHeight),
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
SlidingUpPanel(
minHeight: _collapsedHeight,
panel: Container(
color: Colors.black,
),
),
],
);
}
Use MediaQuery to Get the Size of the Screen then Apply this ,
height: MediaQuery.of(context).size.height*0.7;
Related
I implemented images carousel by using PageView and research about it for a moment and then I archived this result.
As you see, I got extra space in front of first item in PageView. I have no idea to remove it. Has anyone ever did it ? Thank you so much
My PageView Class
List<String> images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTIZccfNPnqalhrWev-Xo7uBhkor57_rKbkw&usqp=CAU",
"https://cdn.dribbble.com/users/4684322/screenshots/18696799/media/722072055e079b1b7c88b1894a1128d7.png?compress=1&resize=1000x750&vertical=top"
];
return Container(
color: Colors.red,
width: double.infinity,
height: 200,
child: PageView.builder(
itemCount: 2,
pageSnapping: true,
controller: _pageController,
itemBuilder: (context, pagePosition) {
return Container(
margin: EdgeInsets.only(right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
images[pagePosition],
fit: BoxFit.cover,
),
));
},
),
);
PageView Controller
_pageController = PageController(viewportFraction: 0.8);
Solution
After I take deep inside PageView class, I just tried every constructor properties ( T_T ) and got solution.
padEnds: false
set it in constructor of PageView
PageView.builder(
itemCount: 2,
padEnds: false,
pageSnapping: true
itemBuilder: (context, pagePosition) {
return Container();
},
)
If anyone has another solution, you can tell me? :)
I copied your code and ran it. There was no problem. It is suggested to change it as follows:
return Container(
margin: const EdgeInsets.only(right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset("asset/bb.jpeg",
fit: BoxFit.cover,
width: double.infinity,
)
))
look here
I am trying to create one Grid View page with Cards as list elements and the last of the cards are getting cut from the bottom. The following are relevant code snippets:
createListBody.dart
List<String> services = [
'Demo1',
'Demo2',
'Demo3',
'Demo4',
'Demo5',
'Demo6',
'Demo7',
'Demo8',
'Demo9',
'Demo10',
];
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 2.0,
mainAxisSpacing: 2.0,
children: services.map((String serviceName){
return Container(
child:Card(
color: Colors.grey[500],
elevation: 15,
semanticContainer: true,
shadowColor: palletFuchsia,
shape: CircleBorder(),
child: InkWell(
onTap: (){
print("Tapped "+serviceName);
},
child: Center(
child: Text(
serviceName,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25
),
),
),
),
)
);
}).toList(),
),
);
}
listScreen.dart
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: palletWhiteDrawer,
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: palletYellowDrawer,
),
child: CreatDrawerWidget(),
),
appBar: CreateAppBar(),
body:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ServiceListBody()
],
)
),
),
);
}
Screenshot
I am completely new to flutter so, sorry if there is some silly mistake. But any help would be useful.
Thank you for your time!
Just for exploring, you can do height: MediaQuery.of(context).size.height *2, It shouldn't get cut anymore right?
Solution 1
Your telling your container a given height which is fix for the moment, no matter how many items you got inside your ListView.
You can for example use ConstrainedBox with shrinkWrap:true and manage your max height
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
child: ListView.builder(
shrinkWrap: true,
...
more info: https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html
Solution 2
use Slivers, they are dynamic.
For this you need to customize your structure a little bit. You wrap everything with a CustomScrollView(), SliverToBoxAdapter() for fixed elements and SliverList() for dynamic ones, makes it work like a charm.
Example using CustomScrollView and SliverToBoxAdapter:
return SafeArea(
child: CustomScrollView(
//scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
slivers: <Widget>[
// Place sliver widgets here
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.fromLTRB(25, 30, 25, 20),
child: SizedBox(
height: 299,
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
...
You can define the height with the SizedBox height. Also you can apply nice effects to your whole View on the CustomScrollView
Example Sliverlist:
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, index) => ChangeNotifierProvider.value(
value: list[index],
child: GestureDetector(
onTap: () {}),
childCount: list.length,
)),
Infos about slivers: https://medium.com/flutterdevs/explore-slivers-in-flutter-d44073bffdf6
The GridView Widget itself is Scrollable , So you don't have to wrap it with a Column and SingleChildScrollView Widget...
You can now simply scroll down if the Circles goes out of the screen
If you wish all the circles to fit in the screen.. You'll have to use
var mobileHeight = MediaQuery.of(context).size.height
And then the height of each circles will be mobileHeight divided by the no. of circles vertically.
I want to create an expandable gallery, which has one image as a main image and upon clicking on it, I want to expand the gallery and show few images below the main image.
So, I have created a ListView, which has a builder that returns ListTileTheme, which I used for removing the contentPadding, with child - ExpansionTile, but I still have some padding left in the container.
Any idea how to completely fill the ExpansionTile? I've tried different approaches that I saw on the web, but no solution so far.
Here is my code:
Container _getGallery() {
Container container = new Container(
height: 500.0,
child: new ListView.builder(itemCount: 1, itemBuilder: (context, i)
{
ListTileTheme tileTheme = new ListTileTheme(
contentPadding: EdgeInsets.all(0.0),
child: ExpansionTile(
trailing: Container(
height: 0.0,
width: 0.0,
),
backgroundColor: Colors.transparent,
title: Image.asset("assets/images/onboarding2.png",
height: 200.0,
width: double.infinity,
alignment: Alignment.center,
fit: BoxFit.cover,
),
children: <Widget>[
new Column(
children: _buildExpandableContent(),
),
],
),
);
return tileTheme;
}),
);
return container;
}
Here you can see what I've achieved so far (1- not expanded, 2- expanded). I want to remove this white lines around the first image.
No, it's not possible. This widget uses ListTile, which adds 16px gap (_horizontalTitleGap constant) if there's trailing widget. The problem is that there's always a trailing widget in ExpansionTile, even if you pass null:
trailing: widget.trailing ?? RotationTransition(
turns: _iconTurns,
child: const Icon(Icons.expand_more),
),
The only dirty workaround I can suggest is to use scale transform to compensate this 16px gap:
title: LayoutBuilder(
builder: (context, constraints) {
final newScale = 1.0 + 16.0 / constraints.maxWidth;
return Container(
transform: Matrix4.identity()..scale(newScale),
child: Image.asset("assets/images/onboarding2.png",
height: 200.0,
width: double.infinity,
alignment: Alignment.center,
fit: BoxFit.cover,
),
);
}
),
I would like to use PageView in Flutter application to display bank cards.
The problem is that height of PageView's page is something like match_parent and fills almost whole screen, but I would like to match Card's height inside PageView - something like wrap_content in android's XML layouts.
Card view contains:
Text- alias
CardView - card graphic
Both are placed in Column widget which is placed in Container.
Text and CardView are with Blue background, Container is with Green background.
#override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.blue,
child: Align(alignment: Alignment.centerLeft, child: Text(card.alias))),
Container(
color: Colors.blue,
child: AspectRatio(aspectRatio: 1.586, child: CardView(card: card))),
],
),
);
}
And here is first problem. I am using mainAxisSize: MainAxisSize.min to wrap Column height but it is not working, so Green color is filling screen - but should be same height as Blue color.
Because single page is that high, so PageView is also too high.
PageView is created with that code and PageView has Red background.:
Widget buildPageView(BuildContext context, AsyncSnapshot<List<WalletCard>> cards) {
return PageView.builder(
physics: AlwaysScrollableScrollPhysics(),
controller: PageController(viewportFraction: 7 / 8),
itemCount: cards.data == null ? 0 : cards.data.length,
itemBuilder: (BuildContext context, int index) {
return Item(index: index, card: cards.data[index]);
});
}
and that method (buildPageView) is used to provide Widget inside CardsPageView. CardsPageView is placed on screen with this code:
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Flexible(
child: Container(
color: Colors.red,
child: CardsPageView(walletCards: cardViewModel.walletCards),
)),
RaisedButton(
onPressed: () {},
color: Colors.orange,
textColor: Colors.white,
child: Text('PAY'),
),
],
));
}
I would like to create a horizontal listView where the first item is always an + icon. After get image, it will move to second item and so on.
This is what I tried
Container(
color: const Color(0xFF00FF00),
padding: EdgeInsets.only(top: 15),
height: MediaQuery.of(context).size.height * 0.25,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (context, index) {
return _buildRow();
}),
)
Widget _buildRow() {
return IconButton(
icon: Center(
child: Icon(
Icons.camera,
size: 30.0,
),
),
onPressed: () {
getImage();
},
);
}
You could start your list of widgets with just the plus widget. And you add your following widgets on the first position of the widget using dart's insert funcion in lists. Something like this:
listWidgets.insert(0, yourWidget);
Doing that you plus widget always will be the last item of the list and will be displayed on the last position.
Widget initialWidget = _buildRow();
List<Widget> listWidgets = [initialWidget];
Container(
color: const Color(0xFF00FF00),
padding: EdgeInsets.only(top: 15),
height: MediaQuery.of(context).size.height * 0.25,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (context, index) {
return listWidgets[index]
),
)
Widget _buildRow() {
return IconButton(
icon: Center(
child: Icon(
Icons.camera,
size: 30.0,
),
),
onPressed: () {
Widget yourWidget = <your-logic-to-create-widget>;
setState(() {
listWidgets.insert(0, yourWidget);
})
},
);
}