skip to Main Content

I want a minimum spacing of 20 between Left Text and Right Text, and Left Text can multi Line automatically

Limiting the width on the left or right side does not solve the problem well, because the length of Right Text is also uncertain.

I tried many ways, but without success, Please Help. Thanks very much!

enter image description here


  Future<void> _pop() async {
    final res = await showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return DemoView();
        });
  }

import 'package:flutter/material.dart';

class DemoView extends StatelessWidget {
  DemoView({super.key});
  final list = ['A Very Long Text ' * 2, 'B Text --------- Text', 'C Text'];
  final list1 = ['Right Text', 'Right Text Right Text', 'C Text'];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ...list.mapIndexed((i, e) => Container(
                color: Colors.grey,
                padding: const EdgeInsets.all(16),
                margin: const EdgeInsets.all(16),
                child: Row(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          e,
                          maxLines: 3,
                          // softWrap: true,
                          // overflow: TextOverflow.ellipsis,
                        ),
                        Text('C Short Text'),
                      ],
                    ),
                    const Spacer(),
                    Container(
                      constraints: BoxConstraints(minWidth: 20),
                    ),
                    Text(
                      list1[i],
                      textAlign: TextAlign.end,
                    )
                  ],
                ),
              ))
        ],
      ),
    );
  }
}

extension ListExtensions<E> on List<E> {
  Iterable<R> mapIndexed<R>(R Function(int index, E element) convert) sync* {
    for (var index = 0; index < length; index++) {
      yield convert(index, this[index]);
    }
  }
}


2

Answers


  1. enter image description here

    Try the following snippet:

    Container(
          color: Colors.black38,
          child: Row(
            children: [
              Expanded(
                flex : 2,
                child: Text('Very ver long text Very ver long text Very ver long text Very ver long text')
              ),
              Expanded(
                flex : 1,
                child: Text('any text any text any text  any text any text any text')
    
              )
            ],
          ),
        )
    
    Login or Signup to reply.
  2. You may wrap the Column with long text in Expanded and set a desired maxWidth constraint to the right text.

          Row(
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore ",
                      maxLines: 3,
                      // softWrap: true,
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text('C Short Text'),
                  ],
                ),
              ),
              // const Spacer(),
              Container(
                constraints: BoxConstraints(minWidth: 20),
              ),
              Container(
                constraints: BoxConstraints(maxWidth: 150),
                child: Text(
                  " Text2:",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.end,
                ),
              )
            ],
          ),
    

    Screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search