I'm creating a ListView with a builder function. I use the widget inspector to assess the any issues with the layout of the widgets.
Usually, the listView shows downwards green arrows as shown here:
[ListView layout][1]
However, in my current app, whenever I create a listView, it shows this green overlay on the listView. This creates artefacts with Image widget nested in stack; the images flicker when scrolling. [artefact layout][2]
This layout does look like it will take the space of 'drawer' in scaffold however, this page does not have a drawer, although all the other pages do.
Please find the code below for your reference.
const BlogListPage({Key? key}) : super(key: key);
#override
State<BlogListPage> createState() => _BlogListPageState();
}
class _BlogListPageState extends State<BlogListPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: ASAppBar(
title: const Text('Blogs'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
margin:
const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
color: Colors.amber,
child: const SizedBox(
height: 100,
width: double.infinity,
),
);
},
));
}
} ```
[1]: https://i.stack.imgur.com/O7Pnc.png
[2]: https://i.stack.imgur.com/0g5HF.png
Related
I am trying to create a modal which contains some details and is scrollable. The modal contains a ListView which is scrollable, but the complete modal is not.
I have tried adding the following options to the ListView, but it didn't help
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics()
The minimum reproducible code is
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'Flutter Stateful Clicker Counter',
theme: ThemeData(
// Application theme data, you can set the colors for the application as
// you want
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Clicker Counter Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key? key, required 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".
#override
_MyHomePageState createState() => _MyHomePageState();
}
_buildTheDescriptionWizard() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Text(
"Paneer is a fresh cheese used in a wide variety of Indian recipes, made by heating and then curdling milk using acid. It's very mild and milky in flavor, white in color, and its texture is soft, spongy, and squeaky. This texture helps it to absorb the flavors of sauces or marinades. It can be made from cow's milk or buffalo milk, either pasteurized or raw, and can be made from whole, skim or reduced-fat milk. ",
textAlign: TextAlign.left,
style: TextStyle(fontSize: 15, height: 1.5, color: Colors.black))),
);
}
class _MyHomePageState extends State<MyHomePage> {
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 Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
elevation: 16,
child: createModal());
}
createModal() {
return Container(
height: 600,
width: 800,
child: Container(
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: <Widget>[
Container(
height: 300,
child: ListView(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
children: [
Container(
width: 300,
color: Colors.white,
// child:
// DropShadow(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
'https://picsum.photos/250?image=9',
height: 250,
width: 250),
),
// )
),
Container(
width: 450, height: 300, color: Colors.black)
],
)),
Divider(),
_buildTheDescriptionWizard()
]))));
}
}
Can someone please help me figure out how I can make the complete modal scrollable ?
remove SingleChildScrollView and Column just use ListView and don't use shrinkWrap: true and physics: const NeverScrollableScrollPhysics()
This question already has answers here:
Horizontal ListView flutter WITHOUT explicit height
(2 answers)
Closed 6 months ago.
I made list view with horizontal scrolling. And it is not working with out setting an height.
My code is
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(""),
),
body: Column(
children: [
Container(
height: 100,
color: Colors.red,
child: ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Card(
color: Colors.amberAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("$index"),
),
);
}),
),
const Expanded(child: Text("Some other views")),
],
),
),
);
}
}
How can I leave the listview height as wrap content?
That's one of the things you will have to live with. If there is a list of 1 million items and each one is wrap_content and somehow one of the list item is going to be 1000px in height, flutter has no way of knowing this as it only lays out items which are going to be visible (or has potential to be visible on user interaction immediately). It doesn't build all the million items at once so we need to provide some height.
This is true for vertical lists as well. We usually don't pay attention as most apps in portrait mode have not much width so it matches parent's width without any issue.
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
Question
Hi, I was searching a solution to allow user scroll on a list even when there is insufficient content.
Looking throght Flutter documentation i found this page https://api.flutter.dev/flutter/widgets/ScrollView/physics.html
As the documentation said
To force the scroll view to always be scrollable even if there is insufficient content, as if primary was true but without necessarily setting it to true, provide an AlwaysScrollableScrollPhysics physics object, as in:
physics: const AlwaysScrollableScrollPhysics(),
so I tried to run a simple code an detect user scroll even when there isn't enough content
code
class Page extends StatefulWidget {
#override
_PageState createState() => _PageState();
}
class _PageState extends State<Page> {
#override
Widget build(BuildContext context) {
final ScrollController scrollController = ScrollController();
#override
void initState(){
scrollController.addListener((){
print('listener called');
});
super.initState();
}
return Scaffold(
body: ListView.builder(
controller: scrollController,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
color: Colors.black,
height: 50,
),
);
},
),
);
}
}
Why this isn't working?
edit
Here is the design i'm looking forward
I have a list that is dynamically created. I want to be able to detect user vertical swipes on that list even if there is no scroll because there aren't enough element to overflow the screen height.
On a scrollable list I can simply add a scroll Listener and then every time a scroll is detected I can do my logic with scrollController.position info's.
I want scroll listener to be called even when user swipes on list of this type
I do see the effect of scroll with the addition of AlwaysScrollableScrollPhysics so that part seems to be working. Maybe wrapping the scaffold on a NotificationListener can do what you're trying to do:
class _PageState extends State<Page> {
#override
Widget build(BuildContext context) {
final ScrollController scrollController = ScrollController();
return NotificationListener(
child: Scaffold(
body: ListView.builder(
controller: scrollController,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
color: Colors.black,
height: 50,
),
);
},
),
),
onNotification: (scrollNotification) {
if (scrollNotification is ScrollStartNotification) {
print('Widget has started scrolling');
}
return true;
},
);
}
}
NotificationListener has a property called onNotification that allows you to check for different kinds of scrollNotifications, you can check more here: NotificationListener Class and ScrollNotification class
Good Day,
I am making great progress on my first app using flutter, some differences for sure, but found great help here. I have successfully produced a dynamic listview from JSON api call, I am trying to take that and convert it to a 2 column potrait gridview and 3 landscape. I have looked through the flutter gallery demo and the docs and can not seem to get a handle on the flow.
Anyone have some other examples or guidance to accomplish.
What I currently have is a ListView.builder calling an itembuilder that returns widgets of a leading icon, text and trailing icon. I want to convert it using the ICON to be the grid of graphics with onTap to another page as the listview does.
Any help or guidance would be great, thought it should be a simple conversion, but it has not been so far. I will attach some of the code below.
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new RefreshIndicator(
child: new ListView.builder(
itemBuilder: _itemBuilder,
itemCount: listcount,
),
onRefresh: _onRefresh,
));
}
Widget _itemBuilder(BuildContext context, int index) {
Specialties spec = getSpec(index);
return new SpecialtyWidget(spec: spec,);
}
Specialties getSpec(int index) {
return new Specialties(
mylist[index]['id'], mylist[index]['name'], mylist[index]['details'],
new Photo(mylist[index]['image'], mylist[index]['name'],
mylist[index]['name']));
}
}
class SpecialtyWidget extends StatefulWidget {
SpecialtyWidget({Key key, this.spec}) : super(key: key);
final Specialties spec;
#override
_SpecialtyWidgetState createState() => new _SpecialtyWidgetState();
}
class _SpecialtyWidgetState extends State<SpecialtyWidget> {
#override
Widget build(BuildContext context) {
return new Container(
height: 64.0,
width: 128.0,
child: new ListTile(
trailing: new Icon(Icons.arrow_right, color: Colors.green, size: 50.0,),
leading: new Image.network('http://$baseurl:8080/getimage/'+widget.spec.pic.assetName, fit: BoxFit.cover,),
title: new Text(
widget.spec.name,
style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
),
onTap: _onTap,
),
);
Thanks
There's an example of GridView.count usage in the Flutter Gallery. You could use a LayoutBuilder or MediaQuery to determine whether the grid is portrait or landscape, and then choose a crossAxisCount count of 2 or 3 depending on what answer you get.