implementing nested ListView inside SingleChildScrollView - flutter

in this sample code i want to put nested ListView inside SingleChildScrollView, but i get this error:
RenderBox was not laid out: RenderRepaintBoundary#8de00 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
my code:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'test',
home: Scaffold(
appBar: AppBar(
title: Text("Scrollview Demo"),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: 50.0,
color: Colors.green,
child: Center(
child: Text('message'),
),
),
Expanded(
child: ListView.builder(
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(title: Text("Index : $index"));
},
),
),
],
),
),
),
);
}
}

In ListView you can set
shrinkWrap: true
so that ListView only occupies the space it needed.
To disable the scrolling on ListView so it uses that of SingleChildScrollView you can set the
physics: NeverScrollableScrollPhysics().
You need to remove the Expanded which set the child to take the available screen in case of here is infinite.
Here:
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 50.0,
color: Colors.green,
child: Center(
child: Text('message'),
),
),
Flexible(
child: ListView.builder(
itemCount: 30,
shrinkWrap: true,
itemBuilder: (context, index) {
return ListTile(title: Text("Index : $index"));
},
),
),
],
),
)

Instead of using SingleChildScrollView then use Column as the child just use ListView.
return Scaffold(
body: ListView(
children: <Widget>[
Container(
height: 104,
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[],
),
),
),
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
),
],
),
);

Ones I was in the same situation and did like that:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'test',
home: Scaffold(
appBar: AppBar(
title: Text("Scrollview Demo"),
),
body: ListView.builder(
itemCount: 30 + 1,
itemBuilder: (context, index) {
if (index == 0) {
return Container(
height: 50.0,
color: Colors.green,
child: Center(
child: Text('message'),
),
);
}
return ListTile(title: Text('Index : ${index -1}'));
},
),
),
);
}
}

Related

How To Make The Column Scrollable In Flutter Web?

The Parent Widget Is Column,
Column Contains the following children:
STACK
CONTAINER(CHILD: ROW)
ROW(CHILDREN: [GESTUREDETECTOR(child:Container), GESTUREDETECTOR(child:Container)]
LISTVIEW BUILDER
Wrapping this column with expanded, and then with singlechildScrollView. The result is the error!!
WHAT TO DO??
Wrap Column with SinglechildScrollView, for ListView.builder you need to set:
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
In your case widget tree will look like this (minimal reproducible sample)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SingleChildScrollView',
home: Scaffold(
appBar: AppBar(
title: Text('SingleChildScrollView Example'),
),
body: SingleChildScrollView(
child: Column(
children: [
Stack(
children: [
Container(
width: 50,
height: 50,
color: Colors.cyan,
),
],
),
Container(
child: Row(
children: [
GestureDetector(
child: Container(
width: 50,
height: 50,
color: Colors.green,
),
),
GestureDetector(
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
],
),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 60,
itemBuilder: (context, index) => Text('Item # $index'),
)
],
),
)),
);
}
}
And it scrolls.

How to prevent widget from beeing scrolled?

How to prevent the first widget (ListView) from beeing scrolled?
The idea is to scroll SomeList, but the most top ListView widget should remain unscrollable.
body: ListView(
children: <Widget>[
ListView(
shrinkWrap: true,
children: <Widget>[
ListTile( // how to prevet this widget from beeing scrolled?
title: Container(
height: 30,
child: Row(...),
),
),
],
),
SomeList(), // builds ListView.separated( ...
],
),
updated:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(title: 'Flutter Demo', home: MyListView());
}
}
class MyListView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar'),
),
body: ListView(
children: <Widget>[
ListView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
ListTile(
title: Container(
height: 30,
color: Colors.black45,
child: Row(
children: const <Widget>[
Expanded(child: Text('Some header')),
],
),
),
),
],
),
RapportList(),
],
),
);
}
}
class RapportList extends StatefulWidget {
#override
_RapportListState createState() => _RapportListState();
}
class _RapportListState extends State<RapportList> {
#override
Widget build(BuildContext context) {
return ListView.separated(
physics: const ScrollPhysics(),
shrinkWrap: true,
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Row(
children: <Widget>[
Expanded(child: Text('$index')),
],
),
);
},
separatorBuilder: (context, index) {
return const Divider();
},
);
}
}
Solution is with Expended Widget,
use physics: NeverScrollableScrollPhysics(), too. here is full code:
class MyListView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar'),
),
body: Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Expanded(
flex:1,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
ListTile(
title: Container(
height: 30,
color: Colors.black45,
child: Row(
children: const <Widget>[
Expanded(child: Text('Some header')),
],
),
),
),
],
),
),
Expanded(flex:9,child: RapportList()),
],
),
),
);
}
}
Use physics: const NeverScrollableScrollPhysics() in Listview Then you can prevent your widget from beeing scrolled.

How to implement a Non scrollable listview inside a SingleChildScrollView

Im trying to implement a non scrollable ListView builder here but can't seem to find how to do it. Reason is because i want everything to be scrollable and i dont want to have a Scrollable widget inside a scrollable parent.
class _DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('App Bar Here')),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello World'),
Container(
child: ListView.builder(
itemBuilder: (context, index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
color: Color(0xffaaaaaa),
height: 20,
child: Text('Jss One')),
Text(
'English',
style: TextStyle(fontSize: 20),
),
],
),
),
);
},
itemCount: 50,
),
),],),));
}}
class _DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('App Bar Here')),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello World'),
Container(
child: ListView.builder(
physics: NeverScrollableScrollPhysics() //add this line,
itemBuilder: (context, index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
color: Color(0xffaaaaaa),
height: 20,
child: Text('Jss One')),
Text(
'English',
style: TextStyle(fontSize: 20),
),
],
),
),
);
},
itemCount: 50,
),
),],),));
}}
set physics property to NeverScrollablePhysics() in order to not scroll the lisview
try using physics property of listview
physics: NeverScrollableScrollPhysics()
hope it helps..
The Solution to what i was going for.
What happens here is the ListBuilder widget will build a List of items not in a Scrollable widget. The parent widget itself is scrollable which makes the whole Screen scrollable. To do this, add shrinkWrap: true and physics: NeverScrollableScrollPhysics() to the ListView.builder() property.
class _DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('App Bar Here')),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Hello World'),
Container(
child: ListView.builder(
shrinkWrap: true, //add this line
physics: NeverScrollableScrollPhysics() //add this line,
itemBuilder: (context, index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Container(
color: Color(0xffaaaaaa),
height: 20,
child: Text('Jss One')),
Text(
'English',
style: TextStyle(fontSize: 20),
),
],
),
),
);
},
itemCount: 50,
),
),],),));
}}

Flutter : Listview Builder Horizontal Inside Stack Widget

I have design like above, In that design I implement to app. I have Stack Widget inside container then inside Stack widget i have ListviewBuilder with Scroll direction Horizontal.
But the problem is, I cant scroll ListViewBuilder Horizontal inside Stack widget.
How can i fixed this ?
My Trial Fail
Source Code
class HomeScreen extends StatelessWidget {
static const routeName = "/home-screen";
#override
Widget build(BuildContext context) {
final mqHeight = MediaQuery.of(context).size.height;
final mqWidth = MediaQuery.of(context).size.width;
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Good Morning'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () => "",
)
],
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue,
height: mqHeight / 3,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.red,
),
Positioned(
top: mqHeight / 4.5,
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)
],
),
),
Container(
child: Text(
'data data data data data data data data data ',
style: Theme.of(context).textTheme.display4,
),
)
],
)),
),
);
}
}
You can copy paste run full code below
From https://github.com/flutter/flutter/issues/36584#issuecomment-554950474
Add top, right, bottom attribute
code snippet
Positioned(
top: mqHeight / 4.5,
left:0.0,
right:0.0,
bottom:0.0,
child: SizedBox(
height: 100,
child: ListView.builder(
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
static const routeName = "/home-screen";
#override
Widget build(BuildContext context) {
final mqHeight = MediaQuery.of(context).size.height;
final mqWidth = MediaQuery.of(context).size.width;
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Good Morning'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () => "",
)
],
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue,
height: mqHeight / 3,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.red,
),
Positioned(
top: mqHeight / 4.5,
left:0.0,
right:0.0,
bottom:0.0,
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)
],
),
),
Container(
child: Text(
'data data data data data data data data data ',
style: Theme.of(context).textTheme.display4,
),
)
],
)),
),
);
}
}
I have already fixed as below:
Positioned(
top: mqHeight / 4.5,
left: 0, /// <-- fixed here
right: 0, /// <-- fixed here
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)```

Listview not showing inside a Row in Flutter

I am trying to show a listview after some texts in a column. The text shows properly inside the first Row until I add a listview inside the next row. Everything disappears after adding the ListView.
Here is the Code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
"Prayer Time",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.normal),
),
],
),
Row(
children: <Widget>[myList()],
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add Alarm',
child: Icon(Icons.add),
backgroundColor: const Color(0xff0A74C5),
),
);
}
Expanded myList() {
return Expanded(
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
)
);
}
}
change like this:
Expanded(
child: Row(
children: <Widget>[myList()],
),
),
Your ListView should have a fixed Size. Try to wrap the ListView inside a Container.
I run your code and fixed it. Replace your myList() with this code bellow:
Expanded myList() {
return Expanded(
child: Container(
width: double.infinity,
height: 200,
child: ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Text(androidVersionNames[position]),
);
},
itemCount: androidVersionNames.length,
),
)
);
}