Flutter Text in Column auto multiline

Question

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]);
 }
 }
}

• Aks: Try to use ListTile() widget
• Ravindra S. Patil: Refer this hope its help.

Answer 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')
 )
 ],
 ),
 )

Answer 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

• Jay: It's Cool. Thanks!