Помещение моих виджетов в столбец во флаттере ломает все - PullRequest
Новая
       49

Помещение моих виджетов в столбец во флаттере ломает все

0 голосов
/ 07 ноября 2019

Я, как упражнение для себя, пытаюсь воссоздать приложение IMDb. Я делаю это, чтобы научиться как можно более внимательно следовать чему-то, чтобы научиться выглядеть так, как должно. С столбцами в строках в столбцах все становится довольно сложно, я не уверен, что делаю что-то не так, но это работает так (хотя, скажите мне, если мой код в корне неверен).

Страница, когда они не находятся в столбце

Я перепробовал много вещей, и даже имея пустой столбец в коде и тексте и кнопке ниже, он работает отлично (как, например, кнопканаходится рядом с текстом, а не под ним, как и должно быть, но он не падает)

Часть, заключенная в множество /////, является «проблемной зоной», я не знаю, чтонеобходим для контекста 


Card(
    color: (HSVColor.fromAHSV(1.0, 0.0, 0.0, 0.22)).toColor(),
    child: Column(children: <Widget>[
      Stack(
        children: <Widget>[
          ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.black, Colors.transparent],
              ).createShader(
                  Rect.fromLTRB(0, 200, rect.width, rect.height));
            },
            blendMode: BlendMode.dstIn,
            child: Image.asset("assets/movies/" +
                _movie.getImagePath() +
                '/banner1.bmp'),
          ),
          Align(
            alignment: FractionalOffset.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(bottom: 10.0),
              child: Column(children: <Widget>[
                RichText(
                  textAlign: TextAlign.left,
                  text: TextSpan(
                    text: _movie.getName() + '\n\n',
                    style:
                        TextStyle(color: Colors.white, fontSize: 25),
                    children: <TextSpan>[],
                  ),
                ),
              ]),
            ),
          )
        ],
      ),
      Align(
          alignment: Alignment.bottomLeft,
          child: Text(
              "\n " +
                  _movie.getReleaseYear() +
                  "    " +
                  _movie.getDuration().toString() +
                  "min     Directed by: " +
                  _movie.getDirector(),
              textAlign: TextAlign.left,
              style: TextStyle(color: Colors.white70))),
      Padding(
        padding: EdgeInsets.all(7.0),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.asset(
              "assets/movies/" +
                  _movie.getImagePath() +
                  '/poster.bmp',
              height: 240,
              width: 160),
          Padding(
            padding: EdgeInsets.all(4.0),
          ),
/////////////////////////////////////////////////////
          Column(
            children: <Widget>[],
          ),
          Expanded(
              child: Align(
                  alignment: Alignment.topLeft,
                  child: Text(
                    _movie.getDescription(),
                    style: TextStyle(color: Colors.white),
                  ))),
          RaisedButton(
            onPressed: () {},
            textColor: Colors.white,
            color: Colors.blue,
          )
/////////////////////////////////////////////////////
        ],
      )
    ])),

, как вы могли видеть, все, что я здесь сделал, это перетащил Expanded and Button в столбец. 

Card(
    color: (HSVColor.fromAHSV(1.0, 0.0, 0.0, 0.22)).toColor(),
    child: Column(children: <Widget>[
      Stack(
        children: <Widget>[
          ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.black, Colors.transparent],
              ).createShader(
                  Rect.fromLTRB(0, 200, rect.width, rect.height));
            },
            blendMode: BlendMode.dstIn,
            child: Image.asset("assets/movies/" +
                _movie.getImagePath() +
                '/banner1.bmp'),
          ),
          Align(
            alignment: FractionalOffset.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(bottom: 10.0),
              child: Column(children: <Widget>[
                RichText(
                  textAlign: TextAlign.left,
                  text: TextSpan(
                    text: _movie.getName() + '\n\n',
                    style:
                        TextStyle(color: Colors.white, fontSize: 25),
                    children: <TextSpan>[],
                  ),
                ),
              ]),
            ),
          )
        ],
      ),
      Align(
          alignment: Alignment.bottomLeft,
          child: Text(
              "\n " +
                  _movie.getReleaseYear() +
                  "    " +
                  _movie.getDuration().toString() +
                  "min     Directed by: " +
                  _movie.getDirector(),
              textAlign: TextAlign.left,
              style: TextStyle(color: Colors.white70))),
      Padding(
        padding: EdgeInsets.all(7.0),
      ),

      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.asset(
              "assets/movies/" +
                  _movie.getImagePath() +
                  '/poster.bmp',
              height: 240,
              width: 160),

          Padding(
            padding: EdgeInsets.all(4.0),
          ),
/////////////////////////////////////////////////////
          Column(children: <Widget>[

            Expanded(
                child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      _movie.getDescription(),
                      style: TextStyle(color: Colors.white),
                    ))),
            RaisedButton(
              onPressed: () {},
              textColor: Colors.white,
              color: Colors.blue,
            )
          ],),
/////////////////////////////////////////////////////
        ],
      )
    ])),

Затем я получил 22 сообщения об ошибках 

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#46c16 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Column file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:28:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (3) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#1ecab relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (4) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#bf879 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (5) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#23d9c relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (6) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#d5fb8 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (7) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#c42f6 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (8) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#af491 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (9) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#82ff0 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (10) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#d9b34 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (11) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#f2c36 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (12) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (13) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#1ecab relayoutBoundary=up9 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (14) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#bf879 relayoutBoundary=up8 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (15) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#23d9c relayoutBoundary=up7 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (16) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#d5fb8 relayoutBoundary=up6 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (17) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#c42f6 relayoutBoundary=up5 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (18) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#af491 relayoutBoundary=up4 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (19) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#82ff0 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (20) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#d9b34 relayoutBoundary=up2 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (21) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#f2c36 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (22) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

Я знаю, что для кого-то, кто знает флаттер, они могут сказать: «О, это не очевидно, глядя на сообщения об ошибках, ясно показывает, что ...», но я очень плохо знаком с флаттером, и ничего из этогоимеет какой-то смысл для меня, особенно не почему это можетbreak

Так как я буквально просто поместил 2 виджета в столбец, и сообщений об ошибках нет, я просто ожидаю, что это сработает. я пытался много играть, менять вещи, но это всегда работает, если это не указано в колонке.

Редактировать 1: Мне удалось заставить его не падать, единственное, что удерживает меня от счастья, это на самом делеРасширенное «что делает вещи не работают. без него: отлично

Редактировать 2: Больше проб и ошибок. Итак, я не могу использовать гибкий. С или без выравнивания, это не работает. Работает без гибкости, но затем экран переполняется. Я понятия не имею, что делать, и, честно говоря, я запутался больше, чем раньше. Гибкие и расширенные оба не работают. Что я делаю не так

1 Ответ

0 голосов
/ 07 ноября 2019

Все, что вам нужно сделать, это обернуть вашего преступника column с flexible виджетом.

Код: 

Card(
          color: (HSVColor.fromAHSV(1.0, 0.0, 0.0, 0.22)).toColor(),
          child: Column(children: <Widget>[
            Stack(
              children: <Widget>[
                ShaderMask(
                  shaderCallback: (rect) {
                    return LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Colors.black, Colors.transparent],
                    ).createShader(
                        Rect.fromLTRB(0, 200, rect.width, rect.height));
                  },
                  blendMode: BlendMode.dstIn,
                  child: Image.network('https://placeimg.com/640/480/tech'),
                ),
                Align(
                  alignment: FractionalOffset.bottomLeft,
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 10.0),
                    child: Column(children: <Widget>[
                      RichText(
                        textAlign: TextAlign.left,
                        text: TextSpan(
                          text: 'Dummy Movie' + '\n\n',
                          style: TextStyle(color: Colors.white, fontSize: 25),
                          children: <TextSpan>[],
                        ),
                      ),
                    ]),
                  ),
                )
              ],
            ),
            Align(
                alignment: Alignment.bottomLeft,
                child: Text(
                    "\n " +
                        '2019' +
                        "    " +
                        '2h 30 Min' +
                        "min     Directed by: " +
                        'Anmol Majhail',
                    textAlign: TextAlign.left,
                    style: TextStyle(color: Colors.white70))),
            Padding(
              padding: EdgeInsets.all(7.0),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Image.network(
                  'https://placeimg.com/640/480/tech',
                  height: 240,
                  width: 160,
                  alignment: Alignment.topCenter,
                ),
                Padding(
                  padding: EdgeInsets.all(4.0),
                ),
/////////////////////////////////////////////////////
                Flexible(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Align(
                          alignment: Alignment.topLeft,
                          child: Text(
                            'This is Dummy Description. Just to fill up the space.',
                            style: TextStyle(color: Colors.white),
                          )),
                      RaisedButton(
                        onPressed: () {},
                        textColor: Colors.white,
                        color: Colors.blue,
                      )
                    ],
                  ),
                ),

/////////////////////////////////////////////////////
              ],
            )
          ]))

enter image description here

...