how to style the Horizontal scroll bar according to this UI flutter-CodePudding

This is my code for the horizontal scrollbar. how to style this according to given UI. where and how I should add styles on this code. the code is showing how I placed the scroll bar in my home. dart. need suggestions to add styles.

home.dart.

 body: ListView(
            children: [
              buildSearchInput(),
    
    
              Padding(
                padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
                child: Column(
                  children: [
                    SizedBox(
                      height: kToolbarHeight,
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: List.generate(4, (index) => Text("item $index")),
                      ),
                    ),
    
                  ],
                ),
              )

CodePudding user response：

You can use Container with StadiumBorder to decorate them and using ListView.separated to have space between items.

final List<String> data = ["item A", "Item Number 2", "new One"];

 Widget itemW({
    required String text,
    required Color bgcolor,
    required Color textColor,
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      alignment: Alignment.center,
      decoration: ShapeDecoration(
        shape: const StadiumBorder(),
        color: bgcolor,
      ),
      child: Text(
        text,
        style: TextStyle(color: textColor),
      ),
    );
  }

....

ListView.separated(
  itemCount: data.length,
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) =>
      itemW(color: Colors.cyanAccent,
      bgcolor: Colors.cyanAccent,       
      text: data[index]),
  separatorBuilder: (context, index) {
    return const SizedBox(
      width: 10,
    );
  },
),