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

Question

enter image description here

• 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)

• Bhaumik: i m using a chipsChoice package and it will not provide any controller for so we can't make it like this
• okmsbun: I see, I was talking about the default Chip Widget of flutter. I don't know the package you specified.

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,
 )),
 )),
 ),
 )
 ],
 ),
 );
}

• Sunil Gupta: While code is great, some explanation on what approach you are taking, perhaps why as well, is needed. In your case it is expected that the reader must gather these insights by going through a lengthy code block.