For example, I have this tree widget:

Row(children: [
  Expanded(flex: 1, child: 
    Text(someStringVariable, overflow: TextOverflow.ellipsis)),
  Flexible(flex: 0, child: 
    Icon(Icons.check)),
]);

This roughly will translate into something like this:

|Lorem                     (check)|
|Lorem Ipsum               (check)|
|Lorem Ipsum Dolor sit A...(check)|

What I need is like this:

|Lorem(check)                     |
|Lorem Ipsum(check)               |
|Lorem Ipsum Dolor sit A...(check)|

How can I modify the code above so it gives output like the later one?

CodePudding user response：

What you are missing is adding an extra Expanded. Expanded will fill out the available space. Instead you just need to use one Flexible and that's it.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: Text(
              'TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText',
              overflow: TextOverflow.ellipsis),
        ),
        Icon(Icons.check),
      ],
    );
  }
}

You can run this on dartpad.dev and see that once you remove some texts, it will behave as you wanted.

EDIT:

One or two sentences about Flexible, Expanded and FlexFit.

Expanded is actually extending from Flexible with a different FlexFit. It uses FlexFit.tight to fill the available area. Flexible on the other hand, it will not use tight but it will use FlexFit.loose.

If you use them together, Expanded will override the available space for its own convenience. That is why it was not working as expected.

CodePudding user response：

Row(children: [
  Flexible(child: Text("Lorem Ipsum", overflow: TextOverflow.ellipsis)),
  Icon(Icons.check),
])

Instead of Expanded widget you can use flexible .because Expanded widget take full space in a row based on the child of row widget

SampleCode

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:whatsapp_share2/whatsapp_share2.dart';

void main() {
  runApp(Material(child: MYAppWithoutFlicker()));
}

class MYAppWithoutFlicker extends StatelessWidget {
  MYAppWithoutFlicker({Key? key}) : super(key: key);
  var s = Scaffold(
    appBar: AppBar(),
    // color: Colors.lightGreen,
    body: TestWidget(),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: s);
  }
}

class TestWidget extends StatelessWidget {
  const TestWidget({Key? key}) : super(key: key);

 

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(children: [
          Flexible(child: Text("Lorem", overflow: TextOverflow.ellipsis)),
          Icon(Icons.check),
        ]),
        Row(children: [
          Flexible(child: Text("Lorem Ipsum", overflow: TextOverflow.ellipsis)),
          Icon(Icons.check),
        ]),
        Row(children: [
          Flexible(
            flex: 2,
            child: Text(
                "Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...Lorem Ipsum Dolor sit A...",
                overflow: TextOverflow.ellipsis),
          ),
          Icon(Icons.check),
        ]),
      ],
    );
  }
}