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

Wrapping widgets within Row in flutter

I have following Widget tree structure:

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Flexible(Text("Very very long text title", overflow: TextOverflow.ellipsis)),
            getMenuAnchor(),
          ],
        )),
        IconButton(icon: 'share_icon.png')
      ],
    );

If screen is having enough width it is displayed properly:
landscape mode

But if we switch from landscape to portrait mode, I want title to wrap and end with ellipses so share_icon, menu_anchor and text can fit in single row without overflowing.

portrait mode

What should be widget tree so all elements can appear in a row without supressing share and menu icons?

Tags:

2

Answers


  1. 0

    Remove unused Container that wrap your Text and MenuAnchor:

                Row(
              children: [
                Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
                getMenuAnchor(),
                IconButton(icon: 'share_icon.png')
              ],
            ),

    Or if you really need the Container, then try wrap it with Flexible too:

                Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Flexible(child: Text("Very very long text title", overflow: TextOverflow.ellipsis)),
                          getMenuAnchor(),
                        ],
                      )),
                ),
                IconButton(icon: 'share_icon.png')
              ],
            ),
    Login or Signup to reply.
  2. 0

    Try this :

    Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Text("Very very long text title",
                overflow: TextOverflow.ellipsis),
          ),
          IconButton(icon: 'share_icon.png')
        ],
      );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search