0

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.

image ui

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")),
                      ),
                    ),
    
                  ],
                ),
              )

,

1 Answers1

0

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,
    );
  },
),
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • hi, this works. tysm. How to change color in each text item here –  Jan 24 '22 at 03:17
  • use `color` parameter to pass to different color `itemW(color: yourColor,` , if you want random color check [this](https://stackoverflow.com/q/51340588/10157127) – Md. Yeasin Sheikh Jan 24 '22 at 03:27
  • itemW(color: Color(0xffEEEACF), text: data[index]),<<<< when i change this color it doesnt change text color it change the box color –  Jan 24 '22 at 03:53
  • you need to use [`TextStyle`](https://api.flutter.dev/flutter/painting/TextStyle-class.html) in that case – Md. Yeasin Sheikh Jan 24 '22 at 03:57