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

Flutter – Horizontal ListView builder end with one button using row

I need horizontal list view (ListView.builder) with scrollable and these list end with one button, I am using row but screen cannot able to scroll

I am newbie in flutter.

enter image description here

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
                height: MediaQuery.of(context).size.height/2,
                child: ListView.builder(
                  physics: ClampingScrollPhysics(),
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: newList!.content.length,
                  itemBuilder: (BuildContext context, int index) => Column(
                    children: [
                      Container(
                        padding: newList!.content.length == index
                            ? EdgeInsets.only(right: 13)
                            : 0 == index
                                ? EdgeInsets.only(left: 13, right: 13)
                                : EdgeInsets.only(right: 13),
                        child: Column(
                          children: [
                            Column(
                              children: [
                                ImageCard(
                                    contentItem: newList.content[index],
                                  
                                    isInINR: newList.isInINR)
                              ],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                )),
          ],
        ),
Tags:

2

Answers


  1. 0

    Instead of adding new element in list you add the condition like below. If index is last then you can show the view all button. I hope you will get the answer. You can ask more if you have any queries.

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData.dark().copyWith(
    scaffoldBackgroundColor: darkBlue,
  ),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Center(
      child: MyWidget(),
      ),
    ),
  );
 } 
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List list = List.generate(20, (index) => index).toList();
  return ListView.builder(
     scrollDirection: Axis.horizontal,
     itemBuilder: (BuildContext context, int index) {
       return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
        children: [
          SizedBox(
              width: 50, height: 50, child: ColoredBox(color: Colors.red)),
          if (list.last == list[index]) ...[
            TextButton(onPressed: () {}, child: Text('View All'))
          ]
        ],
      ),
    );
  },
  itemCount: list.length,
);
}
}
    Login or Signup to reply.
  2. 0

    to add a widget to the end of listView.builder in flutter, you can check the current index, if index is the last item index, we realize that listView has built all the items and we can add a widget to the end of list,also we need to increase listCount, here is a simple:

    SizedBox(
                        height: MediaQuery.of(context).size.height / 2,
                        child: ListView.builder(
                          physics: ClampingScrollPhysics(),
                          shrinkWrap: true,
                          scrollDirection: Axis.horizontal,
                          itemCount: newList!.content.length + 1,
                          itemBuilder: (BuildContext context, int index) =>
                              index == newList!.content.length
                                  ? TextButton()
                                  : YourListItemWidget(),
                        )),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search