Bottom Overflowed in ListTile - Flutter - flutter

Question

I have created a ListTile to return all my documents from my collection in Firestore. But I want to put "R$" before the number, not above it:
Is there a way to do it? Also, I would like to know if there is how to put more information before the ListTile. When I try to create a Text, it gives me an error:
This is the code:
class FinancasMensais extends StatefulWidget {
const FinancasMensais({super.key});
#override
State<FinancasMensais> createState() => _FinancasMensaisState();
}
class _FinancasMensaisState extends State<FinancasMensais> {
final _fireStore = FirebaseFirestore.instance;
final ref =
FirebaseFirestore.instance.collection('addsaidas').snapshots();
Future<void> getData() async {
QuerySnapshot querySnapshot =
await _fireStore.collection('addsaidas').get();
final allData = querySnapshot.docs.map((doc) => doc.data()).toList();
for (var dataMap in allData) {
if (dataMap is Map) {
for (var key in dataMap.keys) {
print('$key: ${dataMap[key]}');
}
print('----------------------');
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 92, 172, 178),
centerTitle: true,
title: Text('Finanças Mensais'),
toolbarHeight: 90,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)
),
elevation: 15,
),
body: StreamBuilder<QuerySnapshot>(
//child: Center(child: Text('Todo Task'),),
stream: ref,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final documents = snapshot.data!.docs;
return ListView.builder(
itemCount: documents.length,
itemBuilder: (context, index) {
final document = documents[index];
final data = document.data() as Map<String, dynamic>;
return ListTile(
contentPadding: EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 4),
leading: Icon(Icons.where_to_vote_outlined,
color: Colors.pink,
size: 36,
),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data['nomesaida'],
style: TextStyle(
fontSize: 22,
),),
Text(data['tipocategoria']),
],
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("R\$",
style: TextStyle(
fontSize: 15
),
),
Text(data['valorsaida'] as String,
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),),
Text(data['datasaida'],
style: TextStyle(
color: Colors.pink
),),
],
),
dense: false,
);
},
);
},
),
);
}
}

Answer 1

Let me outline what you want to do with the above code:
Put specific text before the number
Add text before List Tile Widget
Let's talk about where you may be wrong with your approach.
You are coding both the specific text and number separately. To avoid doing this you should add both fields in a single Text Widget like this(assuming there are no styling constraints):
Text('R\$ ${data['valorsaida']}',
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
Assuming you have styling constraints to adhere to, try using RichText Widget.
To add information before ListTile, try using Column:
// return column instead of ListTile like this:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
//Your Text here
Center(child: Text('Todo Task')),
//Your ListTile here
ListTile(...),
],
);
Hope this helps you.

Answer 2

Duda!
The R$ is above the number cause you're putting all of them inside a Column - that aligns the children always vertically.
To make the R$ appears at the left of the number, you can wrap both inside a Row.
// const Text(
// "R\$",
// style: TextStyle(fontSize: 15),
// ),
// Text(
// data['valorsaida'] as String,
// style: const TextStyle(
// color: Colors.pink,
// fontSize: 28,
// ),
// ),
/// Put it inside a row to align horizontally
Row(
/// Align the children to the right.
mainAxisAlignment: MainAxisAlignment.end,
/// Make the row as small as possible.
/// If you don't do this, the row will take up the entire width of the screen.
/// And you'll get a flutter exception.
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"R\$",
style: TextStyle(fontSize: 15),
),
Text(
(data['valorsaida'] as num).toString(),
style: const TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
],
),
But you can also use the intl library to format currency for you. Give a try to that.