могу ли я поместить этот ресурс изображения и кнопку контейнера в синий контейнер

Question

Я хочу, чтобы мобильное приложение Flutter выглядело так

1

но из своего кода я получаю такой вид

2

и вот мой код

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.blue,
        title: Text('title'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 150,
            width: 500,
          ),
          Image.asset(
            'src/image.png',
            width: 400,
          ),
          Container(
              //flatbutton group
          ),
        ],
      ),
    );
  }
}

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

Answer 1

Используйте стек вместо столбца

Вот обновленный полный код:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.blue,
        title: Text('SIAP UNDIP'),
      ),
      body: Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 150,
            width: 500,
          ),
          Column(
            children: <Widget>[
              Container(
                height: 90,
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  color: Colors.green,
                  image: DecorationImage(
                    image: AssetImage(
                      'src/image.png', // Enter the image here
                    ),
                  ),
                ),
              ),
              Container(
                height: 200,
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[300],
                      spreadRadius: 1,
                      blurRadius: 4,
                      offset: Offset(0, 2),
                    ),
                  ],
                  color: Colors.white,
                ),
                // child: ,  //Enter all the flat Buttons here
              ),
            ],
          ),
        ],
      ),
    );
  }
}