我可以把这个图片资产和容器按钮放到蓝色的容器中吗？

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
              ),
            ],
          ),
        ],
      ),
    );
  }
}