Flutter set Container background with Text child

Question

in flutter i want to have simple Text inside Container with background color on container, for example:

unfortunately i can't set or make this screen shot with flutter widgets

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());

}

result:

Answer 1

#1

Do not initiate widget tree through functions. Create a class under StatelessWidget instead. For more info check out this answer.

---

#2

As for the red bar not auto expanding in width - since you already use Stack, I can suggest a simple solution.

Replace Align (2nd child of Stack) with Positioned like this:

Positioned(
  left: 0,
  right: 0,
  bottom: 0,
  height: 19,
  child: // ...
)

And remove width property of the Container.

Let me know if this helped.

Answer 2

         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),
                    ),
                  ),

hope work