CODEWITHSUNDEEP
flutterdartflutter-layout
Noam
Noam

Reputation: 535

How to achieve dynamic text under icon in the best way

I'm trying to implement 2 Icons in a Row and under each Icon some text

My current implementation:

   ButtonBar(
                        alignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(
                              Icons.directions_car,
                              size: 55.0,
                            ),
                            onPressed: () {},
                          ),
                          IconButton(
                            icon: Icon(
                              Icons.streetview,
                              size: 55.0,
                            ),
                            onPressed: () {},
                          ),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(18.0, 10.0, 0, 0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            Text('some text',
                            style: TextStyle(
                              fontSize: 16.0
                            ),
                            ), 
                            Text('some text'),
                            ],
                        ),
                      ),

My problem is that my text should be dynamic, So every time the text changed, the location of my text changes and sometimes it look really ugly.

How can in place the text in a better way that is posted here?

Upvotes: 0

Views: 94

Answers (1)

Praneeth Dhanushka Fernando
Praneeth Dhanushka Fernando

Reputation: 3263

try this.. so what I have done is I added both Icon and Text inside a Column so they will behave as a group

    ButtonBar(
            alignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Column(
                children: <Widget>[
                  IconButton(
                    padding: EdgeInsets.zero,
                    icon: Icon(
                      Icons.directions_car,
                      size: 55.0,
                    ),
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text('some text'),
                ],
              ),
              Column(
                children: <Widget>[
                  IconButton(
                    padding: EdgeInsets.zero,
                    icon: Icon(
                      Icons.streetview,
                      size: 55.0,
                    ),
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text('some text'),
                ],
              ),
            ],
          ),

Upvotes: 1

Related Questions