【问题标题】:Expanded Widget getting Render Error in Flutter web扩展的小部件在 Flutter web 中出现渲染错误
【发布时间】:2020-06-18 22:14:25
【问题描述】:

将展开的小部件插入支架主体时出现渲染错误。我可以通过使用 Container 来解决它,但更喜欢使用 Expanded。

我已经在没有其他小部件的基本脚手架中尝试过它。这是错误:

https://pastebin.com/uzRveb2r

我只在网络上收到此错误,而不是在移动设备上。

这是页面的代码:

import 'package:flutter/material.dart';
import 'package:webenrol/components/enquiries_series.dart';
import 'package:webenrol/constants.dart';
import 'package:webenrol/widgets/enquiries_chart.dart';

class DashboardAdmin extends StatelessWidget {
  final List<EnquiriesSeries> data = [
    EnquiriesSeries(month: 'Janurary', enquiries: 50),
    EnquiriesSeries(month: 'Febuary', enquiries: 75),
    EnquiriesSeries(month: 'March', enquiries: 80),
    EnquiriesSeries(month: 'April', enquiries: 100),
    EnquiriesSeries(month: 'May', enquiries: 120),
    EnquiriesSeries(month: 'June', enquiries: 150),
    EnquiriesSeries(month: 'July', enquiries: 10),
    EnquiriesSeries(month: 'August', enquiries: 50),
    EnquiriesSeries(month: 'September', enquiries: 70),
    EnquiriesSeries(month: 'October', enquiries: 50),
    EnquiriesSeries(month: 'November', enquiries: 130),
    EnquiriesSeries(month: 'December', enquiries: 450),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Total Number of Enquiries from X centres',
                          style: kDashboardCardTitle),
                      Text(
                        '546',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Website Enquiries', style: kDashboardCardTitle),
                      Text(
                        '10',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Phone Enquiries', style: kDashboardCardTitle),
                      Text(
                        '15',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Walk-in Enquiries', style: kDashboardCardTitle),
                      Text(
                        '6',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Email Enquiries', style: kDashboardCardTitle),
                      Text(
                        '15',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
              Card(
                child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Other Enquiries', style: kDashboardCardTitle),
                      Text(
                        '115',
                        style: kDashboardLargeNumber,
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
          Card(
              child: Padding(
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('History of Enquiries'),
                      Expanded(child: Text('Hello World!')),
//                      EnquiriesChart(
//                        data: data,
//                      ),
                    ],
                  ))),
        ],
      ),
    );
  }
}

【问题讨论】:

    标签: flutter-web


    【解决方案1】:

    可能是因为您展开的小部件位于一列中,而该列本身是另一列的子列。

    您创建的列本身没有定义高度,可能会导致错误,因为它不知道展开高度。

    使用具有定义高度的 SizedBox 或 Container 进行包装。

    https://dartpad.dev/试试这个代码

    import 'package:flutter/material.dart';
    
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Store Warehouse',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            body: DashboardAdmin(),
            ),
        );
      }
    }
    
    
    class DashboardAdmin extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return Container(
          padding: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
    //           Row(
    //             mainAxisAlignment: MainAxisAlignment.center,
    //             children: <Widget>[
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Total Number of Enquiries from X centres',
    //                          ),
    //                       Text(
    //                         '546',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Website Enquiries',),
    //                       Text(
    //                         '10',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Phone Enquiries',),
    //                       Text(
    //                         '15',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Walk-in Enquiries', ),
    //                       Text(
    //                         '6',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Email Enquiries',),
    //                       Text(
    //                         '15',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //               Card(
    //                 child: Padding(
    //                   padding: EdgeInsets.all(20.0),
    //                   child: Column(
    //                     children: <Widget>[
    //                       Text('Other Enquiries',),
    //                       Text(
    //                         '115',
    //                       )
    //                     ],
    //                   ),
    //                 ),
    //               ),
    //             ],
    //           ),
              Container(height: 200, child:
              Card(
    
                  child: Padding(
                      padding: EdgeInsets.all(20.0),
                      child: Column(
                        children: <Widget>[
                          Text('History of Enquiries'),
                          Text('History of Enquiries'),
    
                          Expanded(child: Text('Hello World!')),
                        ],
                      ))),),
            ],
          ),
        );
      }
    }
    

    【讨论】:

    • 谢谢,成功了。我希望不要固定高度,而是希望卡扩展到所需的高度。如果我重建这个页面,我将如何安排它来实现呢?
    • 如果希望高度匹配整个左侧空间,只需将 Container 替换为 Expanded 并删除高度即可。但也许会导致另一种可能的错误,也许
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-08-09
    • 2017-09-25
    • 2023-04-11
    • 2023-02-02
    • 2022-07-08
    • 1970-01-01
    • 2019-02-11
    相关资源
    最近更新 更多