0

🔰 Вопрос новичка в Dart: может понадобиться объяснение на пальцах

Хотел бы построить такую карточку:

введите сюда описание изображения

  • Чекбокс занимает две строки
  • Заголовок Title и описание занимают по одной строке
  • Две кнопки правда также занимают по одной строке

Будучи новичком в Dart, не знаю с чего начать, но насколько я искал, нативного решения аналогичного CSS Grid я не нашёл.

Я не прошу писать полный листинг кода дабы не отнимать Ваше драгоценное время, просто прошу дать подсказку, как это реализовать (желательно без сторонних библиотек).

3
  • В Flutter в основном все строится на flex виджетах (row, column, и тд.). Также есть GridView, но это не Grid layout...
    – MiT
    Commented 20 сент. 2021 в 14:08
  • @MiT, благодарю Вас за комментарий! Могу предположить, что во Flutter нет аналога CSS Grid потому что его нет в Android SDK и в UWP SDK. Как Вы считаете? Commented 22 сент. 2021 в 8:14
  • 1
    нет, это больше из-за концепции работы самого flutter и как он обновляет виджеты. Было бы слишком накладно, если бы он поддерживал Grid layout. Можете в этом убедится посмотрев на DataTable. Хотя могу отметить есть попытки реализации Bootstrap, но как по мне это не очень правильно...
    – MiT
    Commented 22 сент. 2021 в 8:42

1 ответ 1

3

Написать свой виджет и использовать его как и основные виджеты Flutter.

// ignore: must_be_immutable
class CustomCard extends StatefulWidget {
  final String title;
  final String text;
  bool isActive;
  CustomCard({required this.title, required this.text, this.isActive = false, Key? key}) : super(key: key);

  @override
  _CustomCardState createState() => _CustomCardState();
}

class _CustomCardState extends State<CustomCard> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white70,
        borderRadius: BorderRadius.circular(15.0),
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 20.0,
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Row(
          children: [
            Checkbox(
              value: widget.isActive,
              onChanged: (bool? value) {
                setState(() {
                  widget.isActive = value!;
                });
              },
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    widget.title,
                    style: TextStyle(
                      fontSize: 22.0,
                      fontWeight: FontWeight.w700,
                      height: 2.0,
                    ),
                  ),
                  Text(
                    widget.text,
                    style: TextStyle(
                      fontSize: 16.0,
                      height: 1.5,
                    ),
                  ),
                ],
              ),
            ),
            Column(
              children: [
                GestureDetector(
                  onTap: () {
                    print('onTap to "Button 1"');
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
                      child: Text('Button 1'),
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                GestureDetector(
                  onTap: () {
                    print('onTap to "Button 2"');
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
                      child: Text('Button 2'),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

И использовать его как:

CustomCard(title: 'Title', text: 'lorem ipsum dolor sit amet,\nconsectetur adipiscing elit'),
4
  • 1
    Если isActive сделать final, то не нужно будет добавлять ignore (что является правильным, так как виджет всегда должен быть иммутабельным). Вместо Container лучше использовать DecoratedBox, уберёте лишние элементы из дерева. Ну и setState можно заменить на ValueNotifer, тем самым уменьшить количество перестраиваемых виджетов к минимуму и решим проблему с ignore для isActive. В остальном пример хороший.
    – MiT
    Commented 20 сент. 2021 в 13:56
  • Благодарю Вас за полноценный ответ с примером! Commented 23 сент. 2021 в 1:24
  • @MiT, а как указать padding у DecoratedBox? Commented 23 сент. 2021 в 8:24
  • 1
    @БоковГлеб обернуть его в виджет Padding
    – MiT
    Commented 23 сент. 2021 в 9:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.