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

Question

I want to make flutter mobile app look like this

1

but i from my code i get this appearance

2

and here is my code

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

i have tried to use stack, but it doesn't work, or i was false when implemented that. anyone want to help me to resolve that?

Answer 1

Use a stack instead of column

Here is the updated full code:

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