CODEWITHSUNDEEP
flutterdart
S.D.
S.D.

Reputation: 5867

Adding both vertical and horizontal scrolling to ListView

How can I make the Rows inside a vertical ListView, scrollable horizontally.

This is what my app looks like:

enter image description here

I want the user to be able to scroll the ListView both horizontally (to see the contents of the Row) and vertically to see new list items. This behavior is like how you would scroll a DataTable in Flutter:

enter image description here

Here is the build method (based on the Flutter project template):

@override
Widget build(BuildContext context) {
  final List<String> rows = [
    "This is a row with some very long text ... That goes on and on",
    "This class is the configuration for the state.",
    "case the title) provided by the parent (in this case the App widget) and",
    "always marked \"final\"."
  ];

  return Scaffold(
    appBar: AppBar(title: Text("ListView")),
    body: ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        for (final String row in rows)
          Row(
            children: <Widget>[Text(row)],
          )
      ],
    ),
  );
}

Update: Wrapping the Text in Expanded doesn't work as it causes the text to wrap onto multiple lines. I want the text to remain on a single line.

Upvotes: 2

Views: 3987

Answers (1)

Praneeth Dhanushka Fernando
Praneeth Dhanushka Fernando

Reputation: 3273

Finally After a deep search found this finally 

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: new SizedBox(
          width: 1000.0,
          child: new ListView.builder(
            itemBuilder: (BuildContext context, int i) {
              return new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: new List.generate(5, (int j) {
                  return new Text("$i,$j");
                }),
              );
            },
          ),
        ),
      ),
    );
  }

Original source Vote up his answer too

Upvotes: 3

Related Questions