How to make an IMAGE show FULL VIEW on image Slider / Carousel in FLUTTER and how to make a table over the image slider?

Question

I have an Image Slider / Carousel, but it won't show a large / full image as I want. It only shows a half image and its contain a shadow border in it...

Here is what I've done:

Here is the view that I hope I can make:

I've 2 dart files. here are the one who calls it:

final List<String> imgList = [
  'images/Polo 01.png',
  'images/Polo 02.png',
  'images/Polo 03.png',
  'images/Polo 04.png',
  'images/Polo 05.png',
];
final List child = map<Widget>(
  imgList,
      (index, i) {
    return Container(
      margin: EdgeInsets.all(5.0),
      child: ClipRRect(
        child: Stack(children: <Widget>[
          Image.asset(i, fit: BoxFit.cover, width: 1000.0),
          Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            ),
          ),
        ]),
      ),
    );
  },
).toList();

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

class CarouselWithIndicator extends StatefulWidget {
  @override
  _CarouselWithIndicatorState createState() => _CarouselWithIndicatorState();
}

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      CarouselSlider(
        items: child,
        autoPlay: true,
        enlargeCenterPage: false,
        aspectRatio: 2.0,
        onPageChanged: (index) {
          setState(() {
            _current = index;
          });
        },
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: map<Widget>(
          imgList,
              (index, url) {
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
            );
          },
        ),
      ),
    ]);
  }
}


and here to show the view:

body: ListView (
            children: <Widget>[
              new Align 
              (
              alignment: Alignment.topCenter,
                  child: Container(
                    padding: const EdgeInsets.all(5.0),
                    child: Text('Nama Produk', style: TextStyle(color: Colors.black)),
               )
              
              Padding(    //I M A G E  -  S L I D E R
                  padding: EdgeInsets.symmetric(vertical: 15.0),
                  child: Column(children: [
                    CarouselWithIndicator(),
                  ])
              ),

I've 3 questions.

1. how to make full image like no. 3 ?
2. how to create a table like no. 2 ?
3. how to make a different background color / give a background at table like no.1 ?

Answer 1

Your map method is unnecessary you can do that easier like this:

final List<Color> colorList = [
  Colors.blue,
  Colors.red,
  Colors.green,
  Colors.deepPurple,
  Colors.yellow,
];

final List<Widget> colorBackgrounds = colorList
    .map((color) => Container(
          margin: EdgeInsets.all(5.0),
          child: Container(
            width: 500,
            height: 500,
            color: color,
            child: Text("Hello"),
          ),
        ))
    .toList();

The above code should tell you how to set a background color.

In terms of showing a "full image" you should look at the CarouselSlider's aspectRatio property. Here's a hint width/height.

For the table consider creating a widget tree like this:

Column
  Row
    Text
    Expanded
      Text
  Row
    ...

Alternatively look into Table, TableRow and TableCell.