how can i make horizotal scroll like youtube put forward backword button for scroll the chips

Question

• how can i make chip view as youtube with both side button for scroll chips because flutter web is restrict to scroll.

• the below image of YouTube is for app UI and also it use the Chip view for all platform.

Answer 1

You have to make ListView scrollDirection: Axis.horizontal. On the web you can use this to click and scroll like youtube. It worked for me.

PointerDeviceKind

to scroll by pressing the side buttons:

Scrollable.ensureVisible(context)

Answer 2

this design is exact set as the youtube top chip view so tried once. I just make this widget for this kind of design

  import 'package:flutter/material.dart';

Widget scrollableChips(
{@required BuildContext context,
    @required Function leftScrollFunction,
    @required Function rightScrollFunction,
    @required ScrollController scrollController}) {
  return Container(
    height: 40,
    child: Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 8),
          child: ListView.builder(
              key: PageStorageKey<String>('chip'),
              controller: scrollController,
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, i) {
                return Padding(
                        padding: EdgeInsets.only(
                            left: i == 0 ? 32 : 0,
                           right: i == 9 ? 32 : 0),
                        child: MouseRegion(
                          cursor: SystemMouseCursors.click,
                          child: GestureDetector(
                              onTap: () {},
                              child: Padding(
                                padding: EdgeInsets.only(right:8),
                                child: Container(
                                  decoration: BoxDecoration(
                                      color:Colors.black12,
                                      border: Border.all(
                                                  color: Colors.transparent),
                                      borderRadius: BorderRadius.circular(
                                          10)),
                                  child: Center(
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                          left: 8,
                                          right: 8,
                                          top: 4,
                                          bottom: 4),
                                      child: Row(
                                        children: [
                                          RichText(
                                            text: TextSpan(
                                              children: [
                                                TextSpan(
                                                  style: TextStyle(
                                                      fontFamily:
                                                          currentFontStyle,
                                                      fontSize: TextSize
                                                          .chipChoiceText,
                                                      fontWeight:  FontWeight
                                                                      .bold,
                                                      color: Colors.black),
                                                  text: '10',
                                                )
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              )),
                        ),
                      );
              }),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: MouseRegion(
            cursor: SystemMouseCursors.click,
            child: GestureDetector(
                onTap: leftScrollFunction,
                child: Padding(
                  padding: EdgeInsets.only(top: 6),
                  child: Container(
                      height: 40,
                      width: 34,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.centerRight,
                            end: Alignment.centerLeft,
                            colors: [
                               Colors.grey.withOpacity(0.5)
                              Colors.White
                            ]),
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(10),
                            bottomRight:
                                Radius.circular(10),
                            bottomLeft: Radius.circular(0),
                            topLeft: Radius.circular(0)),
                      ),
                      padding: EdgeInsets.only(right: 4),
                      child: Icon(
                        Icons.arrow_circle_left_outlined,
                        color: primaryColor
                      )),
                )),
          ),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: MouseRegion(
            cursor: SystemMouseCursors.click,
            child: GestureDetector(
                onTap: rightScrollFunction,
                child: Padding(
                  padding: EdgeInsets.only(top: 6),
                  child: Container(
                      height: 40,
                      width: 34,
                      padding: EdgeInsets.only(left: 4),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                          Colors.gray.withOpacity(0.5),
Colors.white
                          ],
                        ),
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(0),
                            bottomRight: Radius.circular(0),
                            bottomLeft:
                                Radius.circular(10),
                            topLeft: Radius.circular(10)),
                      ),
                      child: Icon(
                        Icons.arrow_circle_right_outlined,
                        color: primaryColor,
                      )),
                )),
          ),
        )
      ],
    ),
  );
}