Я пытаюсь выполнить макет, в котором компоненты накладываются на флаттер, но у меня проблема.
вот код, который у меня есть до сих пор
import 'package:flutter/material.dart';
class FirstFragment extends StatelessWidget {
_getSizes() {
}
_getPositions(){
}
@override
Widget build(BuildContext context) {
return new Container(
constraints: new BoxConstraints.expand(
height: 200.0,
),
padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(
color: Colors.blue,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
children: [
Text(
'0.00',
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.bold
),
),
Text(
'Current Balance',
style: TextStyle(
color: Colors.white,
fontSize: 26.0,
fontWeight: FontWeight.bold
),
),
new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
)
],
)
)
],
),
)
],
)
);
}
}
когда вы запустите код, вы заметите, что вид карточки сжимается и не перекрывает контейнер. Я хочу сделать то же самое, что и изображение ниже:

обратите внимание, как представление карты с заголовком «Сводка» накладывается на синий фон, а затем есть другие представления карты под представлением сводной карты.
я получаю следующее из моего кода. вид карты не накладывается, как на изображении выше. может кто-нибудь помочь? заранее спасибо
ПРИМЕЧАНИЕ. Было бы здорово, если бы кто-нибудь смог сделать так, чтобы моя карточка выглядела так, как в сводной карточке на изображении выше. тот в моем коде, который я скопировал с сайта somewebiste, чтобы сделать его похожим на изображение выше





Удалить подписку из вашего Container
constraints: new BoxConstraints.expand(
height: 200.0,
)
Добавьте mainAxisSize: MainAxisSize.min к своему Column.
new Column(
mainAxisSize: MainAxisSize.min, // add this
crossAxisAlignment: CrossAxisAlignment.center,
children: ...
)
Полное решение:
class FirstFragment extends StatelessWidget {
_getSizes() {}
_getPositions() {}
@override
Widget build(BuildContext context) {
return new Container(
padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(color: Colors.blue),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'0.00',
style: TextStyle(color: Colors.white, fontSize: 50.0, fontWeight: FontWeight.bold),
),
Text(
'Current Balance',
style: TextStyle(color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold),
),
new Card(
child: new Column(
children: <Widget>[
new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Row(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.thumb_up),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text(
'Like',
style: new TextStyle(fontSize: 18.0),
),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Icon(Icons.comment),
),
new Padding(
padding: new EdgeInsets.all(7.0),
child: new Text('Comments', style: new TextStyle(fontSize: 18.0)),
)
],
))
],
),
)
],
),
);
}
}
Хорошо, понял, для этого нужно использовать Stack.
спасибо за ваше решение CopsOnRoad. однако вид карты не накладывается на синий фон. вид карты находится внутри синего цвета. посмотрите на первую картинку выше. Сводная карточка находится между синим и белым фоном. я хотел бы сделать то же самое.