Вид карты и макет в флаттере

Я пытаюсь выполнить макет, в котором компоненты накладываются на флаттер, но у меня проблема.

вот код, который у меня есть до сих пор

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, чтобы сделать его похожим на изображение выше

Вид карты и макет в флаттере

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
18 728
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалить подписку из вашего 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)),
                        )
                      ],
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }
}

спасибо за ваше решение CopsOnRoad. однако вид карты не накладывается на синий фон. вид карты находится внутри синего цвета. посмотрите на первую картинку выше. Сводная карточка находится между синим и белым фоном. я хотел бы сделать то же самое.

yoohoo 18.06.2019 15:58

Хорошо, понял, для этого нужно использовать Stack.

CopsOnRoad 19.06.2019 06:28

Другие вопросы по теме