I want to dynamically resize the text to fit the width of the widget.

Currently, text and images are displayed in Row(). The text is in Column() and is in two columns.

 SafeArea(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: [
              Expanded(
                flex: 1,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: IntrinsicWidth(
                    child: Stack(
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            FittedBox(
                              fit: BoxFit.fitWidth,
                              child: Text(
                                _localeDate,
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            FittedBox(
                              fit: BoxFit.fitWidth,
                              child: Text(
                                _time,
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Container(
                            alignment: Alignment.bottomCenter,
                            child: _banner == null
                                ? Container()
                                : Container(
                                    height: 52, child: AdWidget(ad: _banner!))),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                  flex: 2,
                  child: Image(fit: BoxFit.cover, image: NetworkImage(url)))
            ],
          ),
        ),

This is the current code, which displays well on the iPad, but sticks out on the iPhone.

CodePudding user response：

try below code :

Row(
  children: [
    Expanded(
      child: IntrinsicWidth(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: const [
            FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(
                "21/12/22",
              ),
            ),
            FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(
                "2:3",
                style: TextStyle(),
              ),
            ),
          ],
        ),
      ),
    ),
    const Expanded(
        flex: 2,
        child: Image(
            fit: BoxFit.cover,
            image: NetworkImage(
                "https://www.shutterstock.com/image-photo/business-woman-drawing-global-structure-260nw-1006041130.jpg")))
  ],
);