Not able to make scrolling in my Listview items that are in the stack in flutter

Question

I want this design enter image description here and almost i have made this design but the problem is with i'm unable to add scrolling in it ..if i'm not using the right approach then give me solution for this

Here's my code "

 List<String> topics = [
    'Need support',
    'Relationship & love',
    'Confession & secret',
    'Inspiration & motivation',
    'Food & Cooking',
    'Personal Story',
    'Business',
    'Something I learned',
    'Education & Learning',
    'Books & Literature',
    'Spirit & Mind',
    'Travel & Adventure',
    'Fashion & Style',
    'Creativity & Art',
    'Humor & Comedy',
    'Sports & Fitness',
    'Technology & Innovation',
    'Current Events & News',
    'Health & Wellness',
    'Hobbies & Interests'
  ];

"
"

SizedBox(
                                height: 50,
                                child: Stack(
                                  children:
                                      List.generate(topics.length, (index) {
                                    Color? color;
                                    switch (index % 4) {
                                      case 0:
                                        color = Colors.yellow;
                                        break;
                                      case 1:
                                        color = Colors.blue;
                                        break;
                                      case 2:
                                        color = Colors.green;
                                        break;
                                      case 3:
                                        color = Colors.red;
                                        break;
                                    }
                                    int reversedIndex =
                                        topics.length - index - 1;
                                    return Positioned(
                                      left: reversedIndex * 130.0,
                                      child: Container(
                                        width: 150,
                                        alignment: Alignment.center,
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 5),
                                        decoration: BoxDecoration(
                                          color: color,
                                          borderRadius: const BorderRadius.only(
                                            topRight: Radius.circular(40),
                                            bottomRight: Radius.circular(40),
                                          ),
                                        ),
                                        height: 50,
                                        child: InkWell(
                                          onTap: () {
                                            filterPro.searchValue = '';
                                            filterPro.setSearchingValue(
                                                topics[reversedIndex]);
                                          },
                                          child: Text(
                                            topics[reversedIndex],
                                            style: TextStyle(
                                              fontFamily: fontFamily,
                                              color: whiteColor,
                                              fontSize: 11,
                                            ),
                                          ),
                                        ),
                                      ),
                                    );
                                  }),
                                ),
                              );

" Please check my above code and give me the solution how to make this list scrollable.

Harsh · Accepted Answer · 2024-04-04 05:58:42Z

0

Here is the code of your solution:

Scaffold(
  appBar: AppBar(),
  body: SizedBox(
    height: 50,
    width: double.infinity,
    child: ListView.builder(
      itemCount: topics.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) => Stack(
        children: [
          Container(
            width: 150,
            height: 50,
            color: _getColor(index + 1 < topics.length ? index + 1 : index),
          ),
          Container(
            width: 150,
            height: 50,
            alignment: Alignment.center,
            padding: const EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(
              color: _getColor(index),
              borderRadius: const BorderRadius.only(
                topRight: Radius.circular(40),
                bottomRight: Radius.circular(40),
              ),
            ),
            child: InkWell(
              onTap: () {},
              child: Text(
                topics[index],
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 11,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

And function for get Colour:

Color _getColor(int index) {
switch (index % 4) {
  case 0:
    return Colors.purple;
  case 1:
    return Colors.blue;
  case 2:
    return Colors.green;
  case 3:
    return Colors.red;
  default:
    return Colors.purple;
}

answered Apr 4, 2024 at 5:58

Harsh

411 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Not able to make scrolling in my Listview items that are in the stack in flutter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related