Reputation: 6292
how to create a row of scrollable text boxes or widgets in flutter inside a ListView?
1.Please, can someone tell me how to create a row of text boxes that are scrollable to left or right in flutter inside a ListView. I can see that I am trying to define an infinite width inside a finite width ListView. But, can't figure out any workaround for this one.
the below-mentioned code works absolutely fine if simply comment the scrolldirection property in customscrollview(i.e., change the scrolldirection to vertical). But, i am looking for a horizontal scroll. I have tried to solve this but no luck.
can someone please help and let me know where i am doing wrong.
- Also, how can we create or inflate a layout like we do in Android in the flutter? I have included a screenshot of layout i am creating for reference:
I have posted the code below to reproduce the same error;
Regards, Mahi
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
void main(){
runApp(new AddNewBlock());
}
class AddNewBlock extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return new _AddNewBlockState();
}
}
class _AddNewBlockState extends State<AddNewBlock>{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Add New Block',
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new ListView(
shrinkWrap: true,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(
left: 16.0,top: 24.0, bottom: 8.0,
),
child: new Text(
'Add New Block',
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.teal[300],
),
),
),
new Container(
margin: const EdgeInsets.only(left: 16.0, top: 16.0, bottom: 8.0),
child: new Text ('Block Name'),
),
new Container(
margin: const EdgeInsets.fromLTRB(16.0, 8.0, 0.0, 8.0),
child: new Text ('Block A1',
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold
),),
),
new Divider(color: Colors.grey,),
new Container(
margin: const EdgeInsets.only(left: 16.0, top: 8.0,bottom: 8.0),
child: new Text('NO. OF FLOORS',
style: new TextStyle(
fontSize: 12.0,
),
),
),
new Container(
child: new Row(
children: <Widget>[
new Flexible(
child: new CustomScrollView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
slivers: <Widget>[
new SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate(
<Widget>[
const Text('this'),
const Text('is'),
const Text('scroll'),
const Text('view'),
const Text('inside'),
const Text('list'),
const Text('view'),
const Text('in'),
const Text('horizontal'),
const Text('direction')
],
),
),
),
],
),
),
],
),
),
],
),
),
);
}
}
Upvotes: 57
Views: 95193
Answers (6)
Reputation: 1502
I made that using a Row widget wrapped with a SingleChildScrollView with horizontal scroll direction, then, I wrapped my row widgets with another row in order to add a sized box widget to make the spacing between those widgets.
Upvotes: 1
Reputation: 351
For a row/column to scroll you can simply use the SingleChildScrollView feature and mention the direction as required.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
//provide all the things u want to horizontally scroll here
]
),
);
Upvotes: 35
Reputation: 267404
You can use:
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox( // Horizontal ListView
height: 100,
child: ListView.builder(
itemCount: 20,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
width: 100,
alignment: Alignment.center,
color: Colors.blue[(index % 9) * 100],
child: Text(index.toString()),
);
},
),
),
SizedBox( // Vertical ListView
height: 200,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return Container(
width: 50,
height: 50,
alignment: Alignment.center,
color: Colors.orange[(index % 9) * 100],
child: Text(index.toString()),
);
},
),
),
],
);
}
Note: For simplicity I didn't refactor the two ListView in a single Widget
Output
Upvotes: 3
Reputation: 4056
I have done this to make my Row widget scrollable:
Text("Debilidades",
style: TextStyle(fontWeight: FontWeight.bold)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: pokemon.weaknesses == null
? <Widget>[
Text(
"No tiene debilidades",
style: TextStyle(color: Colors.grey),
)
]
: pokemon.weaknesses
.map((weakness) => FilterChip(
backgroundColor: Colors.red,
label: Text(
weakness,
style: TextStyle(color: Colors.white),
),
onSelected: (b) {}))
.toList()),
),
Upvotes: 37
Reputation: 116708
I think this is straightforward as long as you put a container of fixed height on your horizontal ListView. But maybe I'm not understanding your question. Please post your code and the error message you're getting if this doesn't work.
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:collection';
void main() {
runApp(new MaterialApp(home: new DemoApp()));
}
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('Nested ListView Example')),
body: new Center(
child: new ListView(
children: <Widget>[
new Container(
height: 80.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: new List.generate(10, (int index) {
return new Card(
color: Colors.blue[index * 100],
child: new Container(
width: 50.0,
height: 50.0,
child: new Text("$index"),
),
);
}),
),
),
],
),
),
);
}
}
Upvotes: 55
Reputation: 53307
I have managed to do this by using ListView.builder()
Here is the full code:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyApp()));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Scroll on the Horizon"),
centerTitle: true,
),
body: new ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return new Row(
children: <Widget>[
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
new Text("Let ", style: new TextStyle(color: Colors.blue),),
new Text("me ", style: new TextStyle(color: Colors.red)),
new Text("scroll ", style: new TextStyle(color: Colors.green)),
new Text("horizontally ",
style: new TextStyle(color: Colors.orange)),
],
);
},
));
}
}
Do not forget to set scrollDirection property to Axis.horizontal, since it is defaulted to the vertical value.
Upvotes: 1
Related Questions
- Flutter ListView.Builder() in scrollable Column with other widgets
- Scrollable Column and ListView.builder
- Scrollable Container inside a Column
- Flutter ListView with different widgets and list items
- How to make ListView Scrollable in flutter
- Flutter: I need to make the widgets scrollable so that whenever i'm scrolling with list view they will follow
- Flutter - How to implement scrollable ListView inside a row
- Flutter Listview Scrollable Row
- how to create horizontally scrollable vertical listview in Flutter?
- How I can build listview scroll inside container?