Warum die rote Ebene auf Flutter angezeigt wird

Question

Ich erstelle ein Kalender-Widget. Wir haben eine DecoratedBox in der Kopfzeile "Zeile" des Tages der Woche hinzugefügt. Warum wird bei Verwendung von Expanded eine rote Ebene angezeigt?

Wenn ausgeschlossen erweitert wird, wird nicht erweitert DecoratedBox ...

class CalenderPage extends StatefulWidget { 
    @override 
    _CalenderPageState createState() => new _CalenderPageState(); 
} 

class _CalenderPageState extends State<CalenderPage> { 
    DateTime now = new DateTime.now(); 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('Calender'), 
    ), 
     body: new Center(
     child: new Column(children: <Widget>[ 
      new Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
       children: _createWeekOfDays()), 
     ]), 
    ), 
    ); 
    } 

    List<Widget> _createWeekOfDays() { 
    List<Widget> _weekOfDays = new List<Widget>(); 
    for (final weekOfDay in ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun',]) { 
     _weekOfDays.add(
     new Expanded(
      child: new DecoratedBox(
      position: DecorationPosition.background, 
      decoration: new BoxDecoration(
       border: new Border.all(
        color: Theme.of(context).dividerColor, width: 1.0), 
      ), 
      child: new Padding(
       padding: new EdgeInsets.only(top: 8.0, bottom: 8.0), 
       child: new Text(
       weekOfDay, 
       style: new TextStyle(fontWeight: FontWeight.bold), 
       textAlign: TextAlign.center, 
      ), 
      ), 
     ), 
     ), 
    ); 
    } 
    return _weekOfDays; 
    } 
} 

Answer 1

Dies ist ein Überlaufproblem;

Sie können Ihre innerhalb einer festen wickeln widthContainer

body: new Center(
     child: new Column(children: <Widget>[ 
      new Container(
      width: 320.0, 
      child: new Row(
      mainAxisSize: MainAxisSize.min, 
       mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
       children: _createWeekOfDays())), 
     ]), 
    ), 

Oder Sie können Ihre innerhalb Padding Widget wickeln und einrücken den Bereich auf der rechten Seite, damit es nicht Überlauf auf dem Rand der Bildschirm

body: new Center(
     child: new Column(children: <Widget>[ 
      new Padding(
       padding: const EdgeInsets.only(right: 3.0), 
       child: new Row(
        mainAxisSize: MainAxisSize.min, 
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
        children: _createWeekOfDays())), 
     ]), 
    ), 

Alterna tiv können Sie ListView und geben Sie die die Größe des so Container verwenden, dass die gesamte Ansicht ist, ohne die Notwendigkeit gezeigt, zu blättern, aber hier müssen Sie das Design Ihres Layout ein wenig

Ich habe hinzugefügt ändern ein Stück Code, die Ihnen helfen:

@override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('Calender'), 
    ), 
     body: new Container(
      height: 50.0, 
      child: new ListView(
      scrollDirection: Axis.horizontal, 
      children: new List.generate(7, (int index) { 
       return new Card(
       child: new Container(
         width: 43.0, 
         height: 30.0, 
         child: new Center(
          child: new Text(_daysOfWeek(index))), 
        ), 
      ); 
      }), 
     ), 
     ), 
    ); 
    } 
    _daysOfWeek(int index) { 
    List myWeek = new List<String>(7); 
    myWeek = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun',]; 
    return myWeek[index]; 
    } 
}