How to add an icon after text widget in an expanded widget? - flutter

Question

I want the arrow_right icon close after the Text Widget, but I have to wrap the text with a Expanded as it might overflow

Answer 1

I think this can solve it.
Row(
children: const [
Expanded(
child: Text(
'this line is overflow, but icon is in right position',
style: TextStyle(fontSize: 12),
softWrap: false,
maxLines: 2,
overflow: TextOverflow.ellipsis, // new
),
),
],
)
or
Row(
children: const [
Expanded(
child: FittedBox(
child: Text(
'this line is overflow, but icon is in right position',
style: TextStyle(fontSize: 12),
softWrap: false,
overflow: TextOverflow.ellipsis,
),
),
),
],
)
code Example
return Scaffold(
body: SafeArea(
child: Expanded(
child: ColoredBox(
color: Colors.deepOrangeAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Line 1',
style: TextStyle(fontSize: 24),
),
Row(
children: const [
Container(
child: Text(
'this line might overflow',
style: TextStyle(fontSize: 12),
),
),
Icon(Icons.arrow_right),
],
),
Row(
children: const [
Expanded(
child: Text(
'this line is overflow, but icon is in right position // this line is overflow, but icon is in right position',
style: TextStyle(fontSize: 12),
softWrap: false,
//maxLines: 2,
overflow: TextOverflow.ellipsis, // new
),
),
Icon(Icons.arrow_right),
],
),
],
),
),
),
),
);
result Image
I'll tell you two ways I know of.
Use Container Widget
How to fix the size by giving width: This method allows you to attach an icon next to the text.
Use Expanded Widget
'Expanded' is a percentage. Since you are using one Expanded widget now, the Text widget is taking up all the remaining space except for the space for the Icon widget.
You can use it according to the conditions of your app.

Answer 2

finally， Flexible can do it!!!

Answer 3

You should try this solution
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(
height: 130,
child: Row(
children: [
Expanded(
flex: 2,
child: Container(
color: Colors.yellowAccent,
),
),
Expanded(
flex: 5,
child: Column(
children: [
Expanded(
flex: 5,
child: Container(
color: Colors.deepOrangeAccent,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(
flex: 2,
child: FittedBox(
child: Text("line 1"),
),
),
Expanded(
flex: 3,
child: Column(
children: [
Expanded(
child: Row(
children: const [
Expanded(
child: Text(
"this line might overflow",
overflow: TextOverflow.ellipsis,
),
),
AspectRatio(
aspectRatio: 1,
child: FittedBox(
child: Icon(Icons.arrow_right)),
),
],
)),
Expanded(
child: Row(
children: const [
Expanded(
child: Text(
"this line is overflow, the icon is in right position",
overflow: TextOverflow.ellipsis,
),
),
AspectRatio(
aspectRatio: 1,
child: FittedBox(
child: Icon(Icons.arrow_right)),
),
],
)),
],
),
),
],
),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.deepPurpleAccent,
),
),
],
),
),
],
),
),
],
),
);
}
}
Solution Image
N.B: This Solution is totally responsive.

Answer 4

******* TRY THIS ********
Text("Any Text Add",
textScaleFactor: 0.85,
style: TextStyle(
fontSize: 12
),
)