могу ли я поместить этот ресурс изображения и кнопку контейнера в синий контейнер
Я хочу, чтобы мобильное приложение Flutter выглядело так
но из своего кода я получаю такой вид
и вот мой код
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
),
],
),
);
}
}
Я пытался использовать стек, но он не работает, или я ошибся при его реализации. кто-нибудь хочет помочь мне решить эту проблему?
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
),
],
),
],
),
);
}
}