Based on the code below, how does one wrap around a row of texts in a container? (as shown in the image). And also, how to make the container slightly rounded as shown in the image?

When I wrap it in a container, why does it takes up the full width of the app from left to right, which is not what I am trying to achieve.

Thank you in advance.

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Expanded(
              child: PageView(
                controller: _pageController,
                onPageChanged: (page) {
                  setState(() {
                    currentIndex = page;
                  });
                },
                children: [
                  SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.only(
                              top: 0, left: 220, right: 30, bottom: 0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Expanded(
                                flex: 7,
                                child: Text(
                                  '187,177.33',
                                  style: GoogleFonts.openSans(
                                      color: Colors.black,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w500),
                                  textAlign: TextAlign.right,
                                ),
                              ),
                              SizedBox(width: 10),
                              Expanded(
                                flex: 4,
                                child: Text(
                                  '82',
                                  style: GoogleFonts.openSans(
                                      color: Colors.black,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w500),
                                  textAlign: TextAlign.right,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

CodePudding user response：

Use decoration on Container. Also reduce the padding,

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Container(
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12)),
    child: Row(
   

return Scaffold(
  body: Column(
    children: [
      Container(
        child: Expanded(
          child: PageView(
            // controller: _pageController,
            onPageChanged: (page) {
              setState(() {
                // currentIndex = page;
              });
            },
            children: [
              SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(12)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Expanded(
                              flex: 7,
                              child: Text(
                                '187,177.33',
                                style: GoogleFonts.openSans(
                                    color: Colors.black,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500),
                                textAlign: TextAlign.right,
                              ),
                            ),
                            SizedBox(width: 10),
                            Expanded(
                              flex: 4,
                              child: Text(
                                '82',
                                style: GoogleFonts.openSans(
                                    color: Colors.black,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500),
                                textAlign: TextAlign.right,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);
}

More about