FLUTTER как создать дизайн как в прилагаемом маге

Question

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

Как создать следующий дизайн, подобный приложенному изображению.

Было бы неплохо использовать стеки.

Answer 1

Попробуйте следующее:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 25),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('SOME CENTERED TITLE'),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 300,
                padding: EdgeInsets.only(left: 5),
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.black,
                    width: 4,
                  ),
                ),
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        height: 60,
                        width: 120,
                        color: Colors.black,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME CENTERED TEXT'),
                    SizedBox(
                      height: 20,
                    ),
                    Text('SOME ANOTHER TEXT'),
                  ],
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  ),
                  SizedBox(width: 50),
                  Expanded(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                      child: Center(
                        child: Text('Text'),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ВЫХОД: