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

user_6107079 0
Viewed 60131

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.

  1. 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:

1[enter image description here

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')
                              ],
                            ),
                          ),
                        ),
                      ],
                          ),
                        ),
                      ],
                    ),
                  ),





      ],

    ),
  ),


  );
   }
}
dart flutter
6 Answers

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()),
),

enter image description here

user_57332580

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

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

enter image description here

user_66186220

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.

user_136865600
Related