С помощью какого виджета во Flutter можно строить ассиметричные микросетки?

Question

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

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

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

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

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

Answer 1

Написать свой виджет и использовать его как и основные виджеты 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'),

БЛОГ НА HUSL

С помощью какого виджета во Flutter можно строить ассиметричные микросетки?

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