Question 219683 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter unable to make responsive Text Row

I am trying to create a responsive Flutter layout that appears to exceed the screen size. I have attempted to create a "single line" alike design with Flexible, but it did not work well (applied for Row, and each item individually. Ideas? :c

Current result:

Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
                      child: Text(
                        provider != null
                            ? 'This account is verified because it's an official'
                            : 'This account is verified.',
                        style: GoogleFonts.lato(fontSize: 15),
                      ),
                    ),
                    if (provider != null) ...[
                      Row(
                        children: <Widget>[
                          Text(provider!,
                              style: GoogleFonts.lato(
                                  fontSize: 15, color: authorizationZoneColor)),
                          Text(
                            ' provider.',
                            style: GoogleFonts.lato(fontSize: 15),
                          ),
                        ],
                      )
                    ],
                    TextButton(
                      onPressed: () async {},
                      style: ButtonStyle(
                          overlayColor:
                              MaterialStateProperty.all(Colors.transparent),
                          minimumSize:
                              MaterialStateProperty.all<Size>(const Size(0, 0)),
                          padding: MaterialStateProperty.all<EdgeInsets>(
                              const EdgeInsets.all(0)),
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                      child: Text('Learn more.',
                          style: GoogleFonts.lato(
                              fontSize: 15, color: authorizationZoneColor)),
                    )
                  ],
                )

enter image description here

Required result:
enter image description here

Tags:

2

Answers


  1. 0

    To achieve this, you need to use the TextSpan widget instead of the Row widget. The TextSpan widget automatically aligns the Text widget contents in a row. You can individually apply styles to each Text widget and the Button.

    Login or Signup to reply.
  2. 0

    Consider using RichText instead of Row for this particular purpose. RichText offers a child widget called TextSpan, which includes a useful property called "recognizer." By assigning a TapGestureRecognizer to this property, you can achieve the desired functionality more efficiently.

    Example:

    ListTile(
        leading: const Icon(
          Icons.sunny,
          color: Colors.orange,
        ), // Use your own widget.
        horizontalTitleGap: 0,
        title: RichText(
          text: TextSpan(
            children: [
              const TextSpan(
                text: 'This account is verified because it's an official ',
                style: TextStyle(
                    color: Colors.black), // Use your own preferred style
              ),
              TextSpan(
                text: 'Latvian Government ',
                style: const TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () => print('DO SOMETHING'),
              ),
              const TextSpan(
                text: 'Provider. ',
                style: TextStyle(color: Colors.black),
              ),
              TextSpan(
                text: 'Learn more',
                style: const TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () => print('DO SOMETHING'),
              ),
            ],
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search