我可以将此图像资产和容器按钮放入蓝色容器中吗

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

我可以将此图像资产和容器按钮放入蓝色容器中吗

can i place this image asset and container button into the blue container

flutter

flutter-layout

flutter-container