将日期选择器的文本字段和图标放在同一行

Question

我所要做的就是在flutter应用程序的同一行上有一个文本字段和一个日期选择器图标。当用户单击日期选择器图标时，他们将能够选择一个日期，该日期将在文本字段中设置。这应该很简单，但我一直收到错误。

而且，文本字段和图标现在甚至都不会显示在屏幕上。请帮帮忙。

以下是我执行热重新加载时的控制台输出：

Performing hot reload...
Syncing files to device sdk gphone x86...
/C:/src/flutter/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_datetime_picker-1.5.1/lib/flutter_datetime_picker.dart:311:32: Warning: Operand of null-aware operation '??' has type 'Color' which excludes null.
 - 'Color' is from 'dart:ui'.
                  color: theme.backgroundColor ?? Colors.white,
                               ^

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.
'package:flutter/src/material/input_decorator.dart':
Failed assertion: line 959 pos 7: 'layoutConstraints.maxWidth < double.infinity'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was: 
  TextField file:///C:/Users/nkane/AndroidStudioProjects/tonnah/lib/screens/transaction_detail_screen.dart:582:21
When the exception was thrown, this was the stack: 
#2      _RenderDecoration._layout (package:flutter/src/material/input_decorator.dart:959:7)
#3      _RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1310:44)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
#5      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#6      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
...
The following RenderObject was being processed when the exception was fired: _RenderDecoration#3d795 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=50.0)
...  size: MISSING
RenderObject: _RenderDecoration#3d795 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=50.0)
  size: MISSING
...  input: RenderRepaintBoundary#5840c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0)
...    constraints: MISSING
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderMouseRegion#4b1e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      needs compositing
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      listeners: <none>
...      child: RenderRepaintBoundary#0aae3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        usefulness ratio: no metrics collected yet (never painted)
...        child: RenderCustomPaint#3a2b6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          needs compositing
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...  label: RenderTransform#c189e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0)
...    constraints: MISSING
...    size: MISSING
...    transform matrix: [0] 1.0,0.0,0.0,-0.0
[1] 0.0,1.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...    origin: null
...    alignment: null
...    textDirection: ltr
...    transformHitTests: true
...    child: RenderAnimatedOpacity#16d0b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      opacity: AnimationController#f80a1(⏮ 0.000; paused; for AnimatedOpacity)➩Cubic(0.40, 0.00, 0.20, 1.00)➩Tween<double>(1.0 → null)➩1.0
...      child: RenderParagraph#211e5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        textAlign: center
...        textDirection: ltr
...        softWrap: wrapping at box width
...        overflow: ellipsis
...        locale: en_US
...        maxLines: unlimited
...        text: TextSpan
...          debugLabel: ((englishLike subhead 2014).merge(blackMountainView subtitle1)).copyWith
...          inherit: false
...          color: Color(0x99000000)
...          family: Roboto
...          size: 16.0
...          weight: 400
...          baseline: alphabetic
...          decoration: TextDecoration.none
...          "Contract Date"
...  hint: RenderAnimatedOpacity#d7c0f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0)
...    constraints: MISSING
...    size: MISSING
...    opacity: AnimationController#02b53(⏮ 0.000; paused; for AnimatedOpacity)➩Cubic(0.40, 0.00, 0.20, 1.00)➩Tween<double>(0.0 → null)➩0.0
...    alwaysIncludeSemantics
...    child: RenderParagraph#9b614 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      textAlign: center
...      textDirection: ltr
...      softWrap: wrapping at box width
...      overflow: ellipsis
...      locale: en_US
...      maxLines: 1
...      text: TextSpan
...        debugLabel: ((englishLike subhead 2014).merge(blackMountainView subtitle1)).copyWith
...        inherit: false
...        color: Color(0x99000000)
...        family: Roboto
...        size: 16.0
...        weight: 400
...        baseline: alphabetic
...        decoration: TextDecoration.none
...        "Contract Date"
...  helperError: RenderConstrainedBox#a8da3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0)
...    constraints: MISSING
...    size: MISSING
...    additionalConstraints: BoxConstraints(unconstrained)
...  container: RenderCustomPaint#7f6df NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0)
...    constraints: MISSING
...    size: MISSING
====================================================================================================

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: _RenderDecoration#3d795 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was: 
  TextField file:///C:/Users/nkane/AndroidStudioProjects/tonnah/lib/screens/transaction_detail_screen.dart:582:21
When the exception was thrown, this was the stack: 
#2      RenderBox.size (package:flutter/src/rendering/box.dart:1930:12)
#3      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:117:21)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
#5      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#6      RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
...
The following RenderObject was being processed when the exception was fired: RenderPointerListener#48de7 relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=50.0)
...  size: MISSING
...  behavior: translucent
...  listeners: down
RenderObject: RenderPointerListener#48de7 relayoutBoundary=up4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=50.0)
  size: MISSING
  behavior: translucent
  listeners: down
...  child: _RenderDecoration#3d795 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=50.0)
...    size: MISSING
...    input: RenderRepaintBoundary#5840c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      usefulness ratio: no metrics collected yet (never painted)
...      child: RenderMouseRegion#4b1e1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        listeners: <none>
...        child: RenderRepaintBoundary#0aae3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          needs compositing
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          usefulness ratio: no metrics collected yet (never painted)
...    label: RenderTransform#c189e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      transform matrix: [0] 1.0,0.0,0.0,-0.0
[1] 0.0,1.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...      origin: null
...      alignment: null
...      textDirection: ltr
...      transformHitTests: true
...      child: RenderAnimatedOpacity#16d0b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        opacity: AnimationController#f80a1(⏮ 0.000; paused; for AnimatedOpacity)➩Cubic(0.40, 0.00, 0.20, 1.00)➩Tween<double>(1.0 → null)➩1.0
...        child: RenderParagraph#211e5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          textAlign: center
...          textDirection: ltr
...          softWrap: wrapping at box width
...          overflow: ellipsis
...          locale: en_US
...          maxLines: unlimited
...    hint: RenderAnimatedOpacity#d7c0f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      opacity: AnimationController#02b53(⏮ 0.000; paused; for AnimatedOpacity)➩Cubic(0.40, 0.00, 0.20, 1.00)➩Tween<double>(0.0 → null)➩0.0
...      alwaysIncludeSemantics
...      child: RenderParagraph#9b614 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        textAlign: center
...        textDirection: ltr
...        softWrap: wrapping at box width
...        overflow: ellipsis
...        locale: en_US
...        maxLines: 1
...        text: TextSpan
...          debugLabel: ((englishLike subhead 2014).merge(blackMountainView subtitle1)).copyWith
...          inherit: false
...          color: Color(0x99000000)
...          family: Roboto
...          size: 16.0
...          weight: 400
...          baseline: alphabetic
...          decoration: TextDecoration.none
...          "Contract Date"
...    helperError: RenderConstrainedBox#a8da3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      additionalConstraints: BoxConstraints(unconstrained)
...    container: RenderCustomPaint#7f6df NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
====================================================================================================

这是我尝试使用的代码。也许有更好的方法可以做到这一点，但这就是我所发现的。

Container(
                  alignment: Alignment.centerLeft,
                  child:
                    SizedBox(
                    height: 50.0,
                    width: 150,

                    child: Row(
                    children: <Widget>[
                    TextField(
                      keyboardType: TextInputType.text,
                      controller: contractDateController,
                      textAlign: TextAlign.center,
                      onChanged: (value) {
                        trxnProvider.changecontractDate(value); //, loggedInUid);
                      },
                      decoration:
                      InputDecoration(
                          hintText: 'Contract Date', labelText: 'Contract Date'),
                    ),
                    IconButton(onPressed: () {_selectDate(context);}, icon: Icon(Icons.calendar_today)),
                  ],
                    ),
                    ),
                ),

Answer 1

那么，您正试图将一个IconButton放在一个textField旁边，该all接受所有的“宽度”，而不提供任何约束。这就是为什么这些小部件之间会发生冲突，因此，它们中的任何一个都不会出现。

我建议删除该行，并将IconButton放在textField的SuffixIcon中。

Container(
      alignment: Alignment.centerLeft,
      child: SizedBox(
        height: 50.0,
        width: 150,
        child: TextField(
          keyboardType: TextInputType.text,
          textAlign: TextAlign.center,
          controller: contractDateController,
          onChanged: (value) {trxnProvider.changecontractDate(value); 
          //,loggedInUid);},
          decoration: InputDecoration(
            hintText: 'Contract Date',
            labelText: 'Contract Date',
            suffixIcon: IconButton(
              icon: Icon(
                Icons.calendar_today,
              ),
              onPressed: () {_selectDate(context);},
            ),
          ),
        ),
      ),
    ),