Как сделать, чтобы ИЗОБРАЖЕНИЕ показывало ПОЛНЫЙ ВИД на изображении Slider / Carousel во FLUTTER и как сделать таблицу поверх ползунка изображения?

Question

У меня есть ползунок изображения / карусель, но он не показывает большое / полное изображение, как я хочу. Он показывает только половину изображения и содержит теневую рамку ...

Вот что я сделал:

Вот мнение, которое я надеюсь сделать:

У меня есть 2 дротика. вот тот, кто называет это:

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

У меня 3 вопроса.

1. как сделать полное изображение как нет. 3?
2. как создать таблицу как нет. 2?
3. как сделать другой цвет фона / дать фон за столом, как № 1?

Answer 1

Ваш метод карты не нужен, вы можете сделать это проще, как это:

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();

Приведенный выше код должен рассказать вам, как установить цвет фона.

С точки зрения отображения «полного изображения» вы должны взглянуть на свойство aspectRatio CarouselSlider. Вот подсказка ширина / высота.

Для таблицы рассмотрите создание дерева виджетов следующим образом:

Column
  Row
    Text
    Expanded
      Text
  Row
    ...

В качестве альтернативы посмотрите на Table, TableRow и TableCell.