CODEWITHSUNDEEP
flutterdart
rocktadiani
rocktadiani

Reputation: 35

How to solve truncated text in flutter

In flutter, I made image and add text under image, but the text is truncated (image below)

Screen shot

I do the following :

body: new TabBarView(
        children: [
          new Scaffold(
            body: GridView.count(
              primary: true,
              padding: const EdgeInsets.all(20.0),
              crossAxisCount: 2,
              childAspectRatio: 1.0,
              mainAxisSpacing: 100.0,
              crossAxisSpacing: 15.0,
              children: <Widget>[
                ListView(
                  children: <Widget>[
                    new Container(
                      decoration: gradientBackDecoration(),
                      child: new ClipRRect(
                        borderRadius: BorderRadius.circular(30.0),
                        child: Image.asset("src/images/2way.jpg",
                            height: 167.0, fit: BoxFit.fitHeight),
                      ),
                    ),
                    new Text(
                      '2 Way',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: "AbrilFatFace",
                      ),
                    ),
                  ],
                ),
    ListView(
                  children: <Widget>[
                    new Container(
                      decoration: gradientBackDecoration(),
                      child: new ClipRRect(
                        borderRadius: BorderRadius.circular(30.0),
                        child: Image.asset("src/images/andycaldwell.jpg",
                            height: 167.0, fit: BoxFit.fitHeight),
                      ),
                    ),
                    new Text(
                      'Andy Caldwell',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: "AbrilFatFace",
                      ),
                    ),
                  ],
                ),
              ],
            ),

I have updated my code.

I expect the text looks more bigger, centered and not truncated. Thanks for your help guys.

Upvotes: 1

Views: 922

Answers (1)

nick.tdr
nick.tdr

Reputation: 4933

So in a grid view when the aspect ration is 1, the width and height of its children is same. For a vertically scrolling gridview it first calculates the available screen to fit the width which then determines its height.

In the above scenario the height was as big as the width of the item, which was not allowing the text to show. Adjust the aspect ratio(0.8 worked for me) and that should work. If you want to be more precise then use SliverGridDelegate.

Upvotes: 1

Related Questions