Posted in Dart Flutter

Flutter – How to Make YouTube-like Horizontal Chips List

Flutter – How to Make YouTube-like Horizontal Chips List Posted on May 17, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Do you want to make chips list in a horizontal scroll view? Then have a look at the example below in which I have made a list of Chips exactly like in the YouTube below the App bar. The output of the example is:

horizontal chips list

See the example below, read the explanation of code in comment and learn how to design Horizontal Chips List.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class HorizontalChips extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar:AppBar( 
            backgroundColor: Colors.redAccent,
            leading: Icon(FontAwesomeIcons.youtube),
            //using YouTube Icon from FontAwesome Icon Packs
            title: Text("YouTube"),
            actions: <Widget>[
                //actions list in appbar
                IconButton(
                   icon: Icon(Icons.videocam),
                   onPressed: (){ 
                       //action for this button
                   }
                ),

                //actions list in appbar
                IconButton(
                   icon: Icon(Icons.search),
                   onPressed: (){ 
                       //action for this button
                   }
                ),

                //actions list in appbar
                IconButton(
                   icon: Icon(Icons.person),
                   onPressed: (){ 
                       //action for this button
                   }
                ),
            ],
         ), //appbar part

         body:SingleChildScrollView(
             child: Column(
                 children:<Widget>[ 
                       Container( 
                           // showing chips here 
                           child: SingleChildScrollView(
                               scrollDirection: Axis.horizontal,
                               //make horizontal scrolling,
                               //by default, it's vertical scrolling
                               child:Container( 

                                 decoration: BoxDecoration(
                                    color: Colors.white, //set background color
                                    border: Border(bottom:BorderSide(width:1, color:Colors.black12)),
                                    //set the bottom-border
                                  ),

                                 child: Row(
                                    children: <Widget>[
                                        //here is the list of chips
                                        chipOne("All", (){
                                            //action whien clicked on it.
                                        }, active:true), //set this activated
                                        chipOne("Recommended", (){
                                            //action whien clicked on it.
                                        }),
                                        chipOne("Flutter Apps", (){
                                            //action whien clicked on it.
                                        }),
                                        chipOne("PHP & MySQL", (){
                                            //action whien clicked on it.
                                        }),
                                        chipOne("Python", (){
                                            //action whien clicked on it.
                                        }),
                                         chipOne("Java", (){
                                            //action whien clicked on it.
                                        })
                                   ],)
                               )
                           ),
                       ),
                       Container( //Main content below the chips here
                           child:Card(
                             child:Container(
                                 alignment: Alignment.center, 
                                 padding: EdgeInsets.only(
                                         left:20, right:20, bottom:50, top:50
                                      ),
                                 width: double.infinity,
                                 child: Text("YouTube Horizontal Chips Collection",
                                     style: TextStyle(fontSize: 20, color: Colors.redAccent),
                                  ),
                             )
                           ) 
                       )
                 ]
             )
         )
     );
  }

  Widget chipOne(String title, Function clickAction, {bool active = false}){
    //active argument is optional
    return Container( 
      margin: EdgeInsets.all(5),
      child:FlatButton(
            color: active?Colors.black12:Colors.white,
            //if active == true then background color is black
            shape: RoundedRectangleBorder(
                      borderRadius:BorderRadius.circular(30.0),
                      side: BorderSide(color: Colors.black12, width: 2)
                      //set border radius, color and width
                  ),
            onPressed: clickAction, //set function
            child: Text(title) //set title
      )
    );
  }

}

In this way, you can design YouTube-list horizontal chips list easily.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *