Flutter. Как задать отступы между вложенными элементами stack?

Question

Создал card во Flutter и в нем Stack. В Stack Находятся:

Дата(dates[index]),
Название(names[index])
Изображение(images[index]).

Если название или изображение слишком длинные, то они накладываются друг на друга. Необходимо сделать отступы.

Вот код Card:

return Container(
          height: 150,
          margin: EdgeInsets.only(left: 20, right: 20, top: 10),
          key: Key([dates[index], names[index], images[index]].join(';')),
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20)
            ),
            elevation: 10,
            color: cardColor,
            child:
              Stack(
                children: [
                  ListTile(
                    title: Text(dates[index], style: LabelTextStyle),
                    subtitle: Text(names[index], style: textStyle)
                  ),
                  Container(
                      alignment: Alignment.centerRight,
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(5))),
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        child:
                          Image.network(images[index]),
                    )
                  ),
                  Container(
                      alignment: Alignment.bottomLeft,
                      padding: EdgeInsets.all(10),
                      child: IconButton(
                        onPressed: () {
                          setState(() {
                            dates.removeAt(index);
                            names.removeAt(index);
                            images.removeAt(index);
                          });},
                          icon: Icon(Icons.delete_rounded),
                          color: mainColor,
                        ),
                    )
                ]
              ),
            ),
          );

Должно получиться это:

А получается это:

Можно задать отступ у ListTile, но он создается от края контейнера, а изображения все разного размера.

Я пробовал сделать Row, в него поместить все это - выдает ошибку.

Answer 1

Вот такая должна быть верстка:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      margin: EdgeInsets.only(left: 20, right: 20, top: 10),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        elevation: 10,
        color: Colors.grey[300],
        child: Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Padding(
                  padding: EdgeInsets.all(20),
                  child: Column(
                    children: [
                      Text('1'),
                      Text('2'),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
//                 child: Image.network(images[index]),
                    child: Container(color: Colors.grey[500], width: 150),
                  ),
                ),
              ],
            ),
            Positioned(
              bottom: 10,
              left: 10,
              child: IconButton(
                onPressed: () {
//                 setState(() {
//                   dates.removeAt(index);
//                   names.removeAt(index);
//                   images.removeAt(index);
//                 });
                },
                icon: Icon(Icons.delete_rounded),
//               color: mainColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

БЛОГ НА HUSL

Flutter. Как задать отступы между вложенными элементами stack?

Ответы (1 шт):