how to create a row of scrollable text boxes or widgets in flutter inside a ListView?

Question

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.

2. 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')                               ],                             ),                           ),                         ),                       ],                           ),                         ),                       ],                     ),                   ),            ],      ),   ),     );    } } 

Answer 1

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"),                     ),                   );                 }),               ),             ),           ],         ),       ),     );   } }