>
플러터에서 나는 간단한 Text 를 갖고 싶어   Container 내부  컨테이너에 배경색이있는 경우 (예 :

안타깝게도이 스크린 샷을 플러터 위젯으로 설정하거나 만들 수 없습니다

Expanded(
  child: Container(
    margin: EdgeInsets.only(top: 10.0),
    child: ListView(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(right: 1.0, left: 1.0),
          child: Center(
            child: bottomSheetDashBoardItems(
                widget.dashboardItems),
          ),
        ), //container
      ], //list view children
    ), //list view
  ), //container
), //Expanded

Widget bottomSheetDashBoardItems(List<DashboardItems> dashboardItems) {
  return Wrap(
    children: dashboardItems
        .map((item) => Container(
              width: 75.0,
              height: 75.0,
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 0.5,
                      color: Colors.black,
                      offset: Offset(0.0, 0.0),
                    )
                  ]),
              child: Center(
                  child: Stack(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(bottom: 12.0),
                    child: Align(
                      alignment: Alignment.center,
                      child: Image.asset(
                        item.icon,
                        width: 40.0,
                        height: 40.0,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.indigo[400],
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5.0),
                          bottomRight: Radius.circular(5.0),
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.only(top: 3.0),
                        child: Text(
                          item.title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'IranSansLight',
                              fontSize: 9.0),
                        ),
                      ),
                    ),
                  ),
                ],
              )),
            ))
        .toList());

}

결과 :


  • 답변 # 1

    # 1

    기능을 통해 위젯 트리를 시작하지 마십시오. StatelessWidget 아래에 클래스를 만듭니다  대신에. 자세한 내용은이 답변을 확인하십시오.

    <시간>

    # 2

    빨간 막대는 자동으로 너비가 확장되지 않습니다-이미 Stack 를 사용하고 있기 때문에 간단한 해결책을 제안 할 수 있습니다.

    와이즈 비즈 교체   Align 의 (두 번째자식 ) Stack 와 함께  이렇게 :

    Positioned
    
    

    그리고 Positioned( left: 0, right: 0, bottom: 0, height: 19, child: // ... ) 를 제거하십시오   width 의 재산 .

    이것이 도움이되었는지 알려주십시오.

  • 답변 # 2

    Container
    
    

    희망의 일

    Align( alignment: Alignment.bottomCenter, child: Container( // width: 75.0, <--- remove this width and try height: 19.0, decoration: BoxDecoration( color: Colors.indigo[400], borderRadius: BorderRadius.only( bottomLeft: Radius.circular(5.0), bottomRight: Radius.circular(5.0), ), ),

관련 자료

  • 이전 shopify의 고객 등록 페이지에서 사용자 정의 필드를 추가하는 방법은 무엇입니까?
  • 다음 java - 왜 널 캐스트를 매개 변수로 사용합니까?