Блог

Я пытаюсь создать следующий макет в карточке флаттера в построителе списков.. (цвета приведены только для отображения)

Тем не менее, это заканчивается как :-

Я пробовал несколько вариантов, используя поперечную ось (выдает ошибки), растягивание, расширение и т. Д., Но, к сожалению, я не продвинулся далеко. Это то, что у меня есть до сих пор :-

   return Container(
                child: Card(
                  margin: EdgeInsets.only(bottom: 20.0),
                  shape: ContinuousRectangleBorder(
                      side: BorderSide(
                    width: 1.0,
                    color: Colors.white10,
                  )),
                  elevation: 1.0,
                  child: InkWell(
                    onTap: () => print("ciao"),
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.stretch, // add this
                      children: [
                        Image.memory(base64Decode(data[index].thumb_image),
                            // width: 300,
                            height: 150,
                            fit: BoxFit.fill),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Container(
                                color: Colors.red,
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Title',
                                      textAlign: TextAlign.left,
                                    ),
                                    Text('Description'),
                                  ],
                                ),
                              ),
                            ),
                            Expanded(
                                child: Container(
                              color: Colors.blue,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: [
                                  Text('12hs 8mins'),
                                ],
                              ),
                            ))
                          ],
                        ),
                        
                        Text('1000')
                      ],
                    ),
                  ),
                ),
              );
 

Добавление контейнера, который инкапсулирует ваши красные и синие виджеты, помогает делу. Я добавил высоту 50 для контейнера, который инкапсулирует виджеты.

 
void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
                child: Card(
                  margin: EdgeInsets.only(bottom: 20.0),
                  shape: ContinuousRectangleBorder(
                      side: BorderSide(
                    width: 1.0,
                    color: Colors.white10,
                  )),
                  elevation: 1.0,
                  child: InkWell(
                    onTap: () => print("ciao"),
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.stretch, // add this
                      children: [
                       Expanded(
                              child: Container(
                                color: Colors.green,
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Title',
                                      textAlign: TextAlign.left,
                                    ),
                                    Text('Description'),
                                  ],
                                ),
                              ),
                            ),
                        Container(
                          height: 50,
                          child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Container(
                                color: Colors.red,
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Title',
                                      textAlign: TextAlign.left,
                                    ),
                                    Text('Description'),
                                  ],
                                ),
                              ),
                            ),
                            Expanded(
                                child: Container(
                                  // MediaQuery.of(context).size.width
                              color: Colors.blue,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: [
                                  Text('12hs 8mins'),
                                ],
                              ),
                            ))
                          ],
                        ),),
                        
                        Text('1000')
                      ],
                    ),
                  ),
                ),
              ),
    );
  }
}
 

Вот решение с максимальной гибкостью, о котором я мог подумать:

 class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text('Top'),
          ),
        ),
        Container(
          height: 100,
          child: Row(
            children: [
              Flexible(
                flex: 3,
                child: Container(
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text('Bottom Left'),
                )
              ),
              Flexible(
                flex: 1,
                child: Container(
                  color: Colors.orange,
                  alignment: Alignment.center,
                  child: Text('Bottom Right'),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}
 

Который будет выглядеть следующим образом: