I'm having a weird issue with Flutter and the ListView widget. I can see a gap between my items. I can see the black background. Is there something I'm missing so that these gaps does not show? Here is the whole application code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: Container(
color: Colors.black,
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
color: Colors.pink.shade100,
child: Container(
height: 100.0,
),
);
},
itemCount: 100,
),
),
);
}
}
Notice how the gaps are not always visible and change while scrolling.
I tried running your code but I didn't got any unexpected padding between List items. I'm currently on Flutter 2.5
You can try adding padding 0 on your ListView and see if it removes the unexpected padding.
child: ListView.builder(
padding: EdgeInsets.all(0.0),
...
),
I had the same issue, where the line would appear on the end of list view thus showing divider in last two Childs of the ListView.
Solutions I tried was :
setting padding of ListView as zero
setting addRepaintBoundary as false
(spoiler alert) both didn't work.
If all the children of list view are of same color, then wrap you ListView with container and set the color of the container to the color of list child. It will hide the lines.
Related
I'd like to achieve the effect shown on the screenshots below:
First scenario:
The green widget is fixed to the bottom. Container isn't scrollable, as the content is short enough.
Second scenario:
The green widget is pushed to the bottom. The container is scrollable, as the content is too long to fit in the viewport.
The problem is, that since technically SingleChildScrollView's height is infinite, it's impossible to push the green widget to the end of the viewport.
So, what needs to be done for this effect to be achieved (also, both the blue and the green widgets are of dynamic height)?
Try this:
import 'package:flutter/material.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
height: 300,
color: Colors.blue,
),
)),
Container(
height: 100,
color: Colors.green,
)
],
)),
);
}
}
Mess around with the blue containers height to get scrolling to work. The key Widget here is Expanded as it makes it's child height be the greatest room available inside the column. It will take up the rest of the space that the green container is not using
Id highly recommend reading this article to better understand how widgets are laid out in Flutter.
use bottomNavigationBar parameter in you Scaffold for fixed widget to bottom screen
Hello I have a Scaffold wrapped with SingleChildScrollView and child is Column.
Inside Column; Container, TabBar and TabBarView.
First Container is just there for black space.
Container(
color: Colors.black,
height: 300,
),
The second widget of Column which mean TabBar:
(I know we can use it in AppBar but now it is what it is.)
const TabBar(
labelColor: Colors.red,
tabs: [
Tab(text: "Tab1"),
Tab(text: "Tab2"),
Tab(text: "Tab3"),
],
),
Last Column widget is TabBarView. It wrapped by Container that has 300 height.
Container(
height: 300, // here is problem
color: Colors.amber,
child: TabBarView(
children: [
buildContainer(200, Colors.red, 2),
buildContainer(100, Colors.red, 2),
buildContainer(150, Colors.red, 3),
],
),
),
and also this is buildContainer method;
buildContainer(double height, Color color, int count) => ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: height,
color: color,
child: Center(
child: Text("my height ${height.toString()}"),
),
),
);
});
Here is my question. I have 3 tabs and I have three ListViewBuilder.Each one has own child count. But all of them height limited to 300 because of their parent that is Container. I want to set Tab's height dynamicly with each ListViewBuilder's item count.
How can I do that ? I accept dynamic height without child scrolling. I mean, I can scroll whole page for reach the last child. In example, Instagram profile tab. If I have 30 photo, height is phone height. But I have 300 photo, it scrolling all the way down. But also, I don't want to understand pagenation for this one. I am not going to do Instagram. I just want to that, If I create 5 container, okey show me your max height. If I create 1 container, show me just that without scrolling.
I added a dynamic height calculation depending on the number of objects in the ListView.builder. The formula is not perfect, you can add to it, but the point is to subtract the AppBar height and padding to get a clean screen area that the widget completely occupies.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: mainWidget(),
);
}
Widget mainWidget() {
AppBar appBar = AppBar(
toolbarHeight: 56, //You can manually set the AppBar height
title: const Text("App bar"),
);
print(appBar.preferredSize); // Or you can save this value and use it later, it will not be fixed, but will depend on the screen size
return Scaffold(
appBar: appBar,
body: HelpSO(color: Colors.red, count: 5),
);
}
}
class HelpSO extends StatelessWidget {
late double height;
Color color;
int count;
HelpSO({Key? key, required this.color, required this.count})
: super(key: key);
#override
Widget build(BuildContext context) {
// height = (deviceHeight / itemCount) - padding (top + bottom) - appbar.prefferedSize.height / 2;
height = (MediaQuery.of(context).size.height / count) - 16.0 - 56 / 2;
return ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0), // Subtract this value
child: Container(
height: height,
color: color,
child: Center(
child: Text("My height ${height.toString()}"),
),
),
);
});
}
}
I'm new at flutter(2 m).I just come accros with this problem.
My solution was juste wrap first or second(base on your logic) container with a SingleChildScrollView
Hope it will be helpful
I'm using Ink widget with decoration to allow ink splashes above images and colored background.
After I wrapped it inside Dismissible, I got a wierd effect: When I swipe the widget, it's content moves as expected but the decoration stucks in it's original position.
You can see this live in dartpad: https://dartpad.dev/5ef2d2eb3823821a74aa11c680d84d4b?null_safety=true
Q: Is this an intended behaviour in flutter or is it a bug?
Note: The issue disappears if I replace Ink with Container or if I put it out of SingleChildScrollView.
A code to reproduce:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// remove SingleChildScrollView and all will be fine
body: SingleChildScrollView(
child: Dismissible(
key: Key('1'),
// change Ink to Container and all will be fine
child: Ink(
width: 100,
height: 100,
color: Colors.red,
child: Text('Swipe me, and watch my background get stuck!'),
),
),
),
),
);
}
}
The documentation of Ink is...
Paints a decoration (which can be a simple color) on a [Material].
It happens in your sample code because it colors the MaterialApp. To fix your issue, wrap the Ink inside a Material.
Sample...
Material(
child: Ink(
width: 100,
height: 100,
color: Colors.red,
child: Text('Swipe me, and watch my background get stuck!'),
),
),
I have a CustomPaint that needs to be a 1:1 square, and I need to put this in a Row. The horizontal and vertical space available can vary, so I need both the length and width of the square to be the smallest maximum constraint.
How can I achieve this behaviour?
I've tried using LayoutBuilder for this:
Row(
children: [
...,
LayoutBuilder(
builder: (context, constraints) {
final size = min(constraints.maxWidth, constraints.maxHeight);
return SizedBox(
width: size,
height: Size,
child: CustomPaint(...),
),
},
),
]
),
This, however, doesn't work, because Row provides unbounded horizontal constraints (maxWidth == double.infinity). Using the FittedBox widget also fails for the same reason.
Wrapping the LayoutBuilder in an Expanded widget provides it with a bounded maximum width, but I need to have another widget next to it in the Row, so this is not appropriate. Flexible behaves like Expanded in this case, as well.
I think you can get what you want from the AspectRatio widget... if you tell it 1:1, then it tries to make a square unless completely not possible.
Please try the code below, using Align widget restrains the widget to a square :
import 'package:flutter/material.dart';
import 'dart:math';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 2,
child: LayoutBuilder(
builder: (context, constraints) {
final size = min(constraints.maxWidth, constraints.maxHeight);
return Align(
alignment: Alignment.centerRight,
child: Container(
height: size,
width: size,
color: Colors.amber,
),
);
},
),
),
// Expanded(
// flex: 1,
// child: Container(),
// ),
],
);
}
}
I ended up working this issue by moving the responsibility of keeping the widget square up the tree. Widgets that were using the square widget knew more about what other things they were showing and were more capable of giving it the right constraints.
I am learning Flutter, so if my question is a dumb question, please don't throw me a stone :p :D
First, some of the following images might be familiar to you, I am only using this app from github, to test the teory. Source: https://www.youtube.com/watch?v=sgfMdhV4HQI&t=370s
My Question:
I am using pageview to navigate between two pages one with some dragable containers, and another page with some more dragable containers that represent a different topic.
If I define the scrollDirection: Axis.horizontal, it work quit fine. But I want to drag it vertically.
If I define scrollDirection: Axis.vertical, I realised that, I only have a small portion of the screen where I am able to drag the page.
To my understanding, it might be related with the containers.
How can I drag vertically, while touching any where on the screen?
Note: I also tested the SliverToBoxAdapter class without good results.
my git repro https://github.com/engineerRFR/flutter-mytest
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Netflix UI Redesign',
debugShowCheckedModeBanner: false,
home: PageView(
children: <Widget>[
Container(
color: Colors.pink,
child: HomeScreen(),
),
Container(
color: Colors.cyan,
child: photoGallery(),
),
Container(
color: Colors.deepPurple,
),
],
scrollDirection: Axis.horizontal,
onPageChanged: (num) {
print("Page number : " + num.toString());
},
),
);
}
}
photoGallery (){
return PageView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
color: Colors.amber,
)
,
Referring to our comments and as I was suspecting, the root of this problem is not your PageView.
If you check your home_screen.dart, the body of your Scaffold (line 121) is a ListView. If you change it to Column everything starts to work as you want!
And that's because ListView consumes all of the vertical scrolls and the event won't reach the outer PageView.