Want List items vertical and inner list items horizontal Flutter

Question

I want every abcdLine's items characters in new line(vertically scrollable), and all items of characters should be horizontally scrollable in flutter application. I tried with Listview.builder(), but I couldn't get what I want.

List abcdLine = [
{
'characters': ['Ka','Ka','Ki','Kee','Ku','Koo','Ke','Kai','Ko','Kau','Kam','Kah'],
},
{
'characters': ['Kha','Kha','Khi','Khee','Khu','Khoo','Khe','Khai','Kho','Khau','Kham','Khah'],
},
{
'characters': ['Ga','Ga','Gi','Gee','Gu','Goo','Ge','Gai','Go','Gau','Gam','Gah'],
},
],

What is better way? Hope, I could clear.

I also tried using GridView and ListView but, that did not work.

Answer 1

You can use ListView for Parent and for characters you can use SingleChildScrolView(child:Row(....)) or You can ListView with fixedHeight, both case scrollDirection: Axis.horizontal,

return Scaffold(
  body: ListView(
    children: [
      ...abcdLine.map((e) {
        return SingleChildScrollView(
          // you can ListView with horizontal direction with Fixed height
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              ...e['characters']?.map((e) {
                    return Container(
                      width: 100,
                      height: 100,
                      color: Colors.primaries[
                          (e.length * 1000) % Colors.primaries.length],
                      alignment: Alignment.center,
                      child: Text(e),
                    );
                  }).toList() ??
                  [],
            ],
          ),
        );
      }).toList(),
    ],
  ),
);

Answer 2

Maybe you looking for sliver list

Check out sliver list and sliver grid

Sliver list