본문 바로가기
Flutter/Flutter FAQ

Flutter 컨테이너 위젯을 수직으로 부모 요소에 채우도록 만드세요., Make container widget fill parent vertically

by 베타코드 2023. 6. 12.
반응형

질문


TL;DR Need the container to fill the vertical space so that it can act as a ontap listener. Have tried most solutions but nothing seems to work.

So what I am trying to do is to make my container fill up the vertical space while still having a fixed width. Two first is what I have and third is what I want. The idea is to have the container transparent with a gesture ontap listener. If anyone have a better idea as for a different solution, feel free to suggest.

    Widget build(BuildContext context) {
    return new GestureDetector(
      onHorizontalDragUpdate: _move,
      onHorizontalDragEnd: _handleDragEnd,
      child: new Stack(
        children: <Widget>[
          new Positioned.fill(           
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new Container(
                  child: new IconButton(                          
                    padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),
                    icon: new Icon(Icons.warning),
                    color: Colors.black12,
                    onPressed: () {},
                  )
                ),
              ],
            ),
          ),
          new SlideTransition(
            position: new Tween<Offset>(
              begin:  Offset(0.0, 0.0),
              end: const Offset(-0.6, 0.0),
            ).animate(_animation),
            child: new Card(
              child: new Row(
                children: <Widget>[
                  new Container(
                    width: 20.0,
                    height: 20.0,
                    color: Colors.amber,
                  ),
                  new Expanded(
                    child: new Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        
                        _getListTile(),
                        _ifStoplineIsToBeShown()
                      ],
                    ),
                  )
                ],
              )
            ),
          ),
        ],
      )
    );
  }

I am quite sure that i have been missing something considering the fact that I have tried a lot of different things and nothing seems to work.

I have also uploaded an image with the debug painting here.

PS. I know I have set the height to a fixed value, but this is the only way to show the container.


답변


꿀팁은 IntrinsicHeight 위젯과 crossAxisAlignment: CrossAxisAlignment.stretch가 있는 Row를 결합하는 것입니다.

이렇게 하면 Row의 자식들이 수직으로 확장되지만 Row는 가능한 최소한의 수직 공간을 차지합니다.

Card(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          width: 20.0,
          color: Colors.amber,
        ),
        // Expanded(...)
      ],
    ),
  )
)
반응형

댓글