Question 76424 in Flutter Question posted in
The official Flutter documentation can be found here.

Bottom Overflowed in ListTile – Flutter

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:

error

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:

error2

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,
              );
            },
          );
        },
      ),
     
    );
  }
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    1. 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.

    1. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search