Question 75020 in Flutter Question posted in
The official Flutter documentation can be found here.

Want List items vertical and inner list items horizontal Flutter

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.

Tags:

2

Answers


  1. 0

    Maybe you looking for sliver list

    Check out sliver list and sliver grid

    Sliver list

    Login or Signup to reply.
  2. 0

    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(),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search