Как поставить зеленую рамку под желтой рамкой в ​​макете флаттера? - PullRequest
Новая
       12

Как поставить зеленую рамку под желтой рамкой в ​​макете флаттера?

0 голосов
/ 18 апреля 2020

Я пытаюсь научиться трепетать, и я использую курс из appbrewery.co, и в этом курсе у меня есть задача макета, в которой я должен сделать макет в соответствии с этой картинкой:

https://drive.google.com/uc?export=download&id=1k7oW5qVLJqzw_lEFsOFS_qKmkGjBX1pL

Но я не могу этого сделать, потому что не могу переместить зеленое поле под желтое поле. Я пытаюсь сделать это, но не в состоянии сделать это, и они также не дали никакого решения. Может кто-нибудь взглянуть на мой код и сказать, что я не могу получить? 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                height: 650,
                width: 90,
                color: Colors.red,
              ),
              SizedBox(width: 10),
              Container(
                height: 100,
                width: 100,
                color: Colors.yellow,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.green,
              ),
              SizedBox(width: 10),
              Container(
                height: 650,
                width: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Спасибо.

My layuot

1 Ответ

0 голосов
/ 18 апреля 2020

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

Это может помочь вам. 

Column(
                children: <Widget>[
                  Container(
                    height: 100,
                    width: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    height: 100,
                    width: 100,
                    color: Colors.green,
                  ),
                ],
              ),
...