Flutter button needs to be pressed twice for value to change

I think you are very close but CartProvider might be redundant. Here is how I would structure it by looking at the example from Firestore’s docs here: https://firebase.flutter.dev/docs/firestore/usage/#realtime-changes.

The example creates a StreamProvider which listens to real-time changes from Firestore. So I mainly changed CartList and Database files to follow this example.

1. CartList should only display data. Currently, it is trying to calculate the total but the total should come from the Stream/Firebase. I made changes to the onPressed functions and wrapped the whole thing in StreamProvider

(I removed GetPrice class entirely, it was not staying up to date with values from Firestore correctly.)

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// I named my Database.dart as DatabaseService.dart, fyi
import 'DatabaseService.dart';

class Cart {
  String? brand;
  int? quantity;
  int? price;
  String? image;
  String? model;
  Cart({this.brand, this.quantity, this.price, this.image, this.model});
}

class CartList extends StatefulWidget {
  const CartList({super.key});

  @override
  State<CartList> createState() => _CartListState();
}

class _CartListState extends State<CartList> {
  @override
  Widget build(BuildContext context) {
    // get the stream from the provider
    final carts = Provider.of<DatabaseService>(context).carts;
    return Scaffold(
      appBar: AppBar(
        title: Text("Cart"),
      ),
      // this body now accepts data from a Stream
      body: StreamBuilder<List<Cart>>(
        stream: carts,
        builder: (context, snapshot) { 
          if (!snapshot.hasData) {
            return SizedBox.shrink();
          }
          // snapshot.data is where the list of Cart should come in
          var data = snapshot.data!;

          // this ListView.builder stayed more or less the same
          return ListView.builder(
            itemCount: data.length,
            itemBuilder: (context, index) {
                  return ListTile(
                     leading: CircleAvatar(
                       backgroundImage: NetworkImage(
                         data[index].image!,
                       ),
                     ),
                    title: Text(
                      data[index].model!,
                      style: TextStyle(fontSize: 20),
                    ),
                    subtitle: Text(
                      data[index].brand!,
                      style: TextStyle(fontSize: 20),
                    ),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton.filled(
                          style: IconButton.styleFrom(
                            backgroundColor: Colors.red,
                          ),
                          onPressed: () {
                            // major changes here, the widget will notify Firestore to change its value. It doesn't have to do anything else.
                            Provider.of<DatabaseService>(context, listen: false)
                                .updateQuantity(index, -1);
                          },
                          icon: Icon(Icons.remove),
                        ),
                        Column(
                          children: [
                            Text(
                              data[index].price.toString(),
                              style: TextStyle(fontSize: 20),
                            ),
                            Text(
                              "QTY: ${data[index].quantity.toString()}",
                              style: TextStyle(fontSize: 16),
                            ),
                          ],
                        ),
                        IconButton.filled(
                          style: IconButton.styleFrom(
                            backgroundColor: Colors.green,
                          ),
                          onPressed: () {
                           // major changes here too, the widget will notify Firestore to change its value.
                            Provider.of<DatabaseService>(context, listen: false)
                                .updateQuantity(index, 1);
                          },
                          icon: Icon(Icons.add),
                        ),
                      ],
                    )
              );
            },
          );
        }),
      bottomSheet: Container(
        height: 130,
        color: Colors.brown[400],
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    "Total ",
                    style: TextStyle(fontSize: 25, color: Colors.white),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text( 
                    // another major change here, the widget will get the totalPrice from the provider.
                    "$${Provider.of<DatabaseService>(context).totalPrice}",
                    style: const TextStyle(fontSize: 25, color: Colors.white),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 200,
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Text("Make Order"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

2. Now the Database.dart file has to be changed to take care of actually updating data. You already have an updateQuantity() function and this should go through the carts and either increment or decrement its quantity attributes. I think yours should change to look like this:

  void updateQuantity(int index, int quantity) async {
    // this is just an example 
    // how you get your data/snapshot can change
    var doc = await cart.get().data!;
    data[index]['quantity'] += quantity;
    
    // tell firestore to update
    await cart.update(data);
    // tell listeners to rebuild
    notifyListeners();
  }

3. The total price also comes from the DatabaseService so I just added a totalPrice variable like this:

class DatabaseService extends ChangeNotifier {
  int totalPrice = 0;

  void updateTotalPrice() async {
    // another example of getting the data
    var doc = await cart.get().data!;
    // and loop through to calculate price
    for (var item in doc) {
       // do math here
    }
    // update the class variable with calculation from above loop
    totalPrice = ...;
  }
}

Now when the CartList widget is displaying totalPrice it should get the latest.

4. updateQuantity should also update the totalPrice.

void updateQuantity(int index, int quantity) async {
    // do what you need to do to update quantity
    
    // add the helper function to update totalPrice
    updateTotalPrice();
    // and don't forget to rebuild listeners
    notifyListeners();
  }

5. On app load, the totalPrice should also be updated. So I added a call inside _cartFromSnapshot.

// update the total before returning the mapping
updateTotalPrice();
    return docs.map((doc) {

6. Lastly, the ChangeNotifierProvider should move to the root of the app if possible. A very simple example of a main.dart file would look like this:

import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // moved ChangeNotifierProvider to root
    return ChangeNotifierProvider(
        create: (context) => DatabaseService(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: CartList(),
        ));
  }
}

Hope this helps! You can keep CartProvider if you want, just try to put the ChangeNotifierProvider at the root of the app.