Flutter: Stack Overflow error with no explanation for the error

Question

this is the error I get. is there a problem in the myApp widget or in the transaction data class?

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var isPressed = false;
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: TransactionData()),
      ],
      child: MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.purple,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text(
              "Personal Expenses",
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            actions: <Widget>[
              Icon(Icons.add),
            ],
            backgroundColor: Theme.of(context).primaryColor,
          ),
          body: Stack(
            children: <Widget>[
              TxDesign(),
              isPressed ? AddTransaction() : Container()
            ],
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                isPressed = true;
              });
            },
            splashColor: Colors.yellowAccent,
            child: (Icon(Icons.add)),
            backgroundColor: Colors.orange,
            foregroundColor: Colors.black,
          ),
        ),
      ),
    );
  }
}

Anyone Know how to solve this? I can provide the code for TxDesign widget and AddTransation widget if needed. At first I thought It was because I added TxDesign and AddTransaction on top of each other and since both have a Column, the error was showing up. I am fairly new to flutter and I am still practicing.

---

class TransactionData with ChangeNotifier {
  final String id;
  final String title;
  final DateTime subtitle;
  final String price;

  TransactionData({this.id, this.title, this.subtitle, this.price});

  List<TransactionData> transactions = [
    TransactionData(
        id: 'tx1',
        price: "69.99",
        title: 'New Shoes',
        subtitle: DateTime.now()),
    TransactionData(
        id: 'tx2', price: "70.0", title: 'New Bois', subtitle: DateTime.now()),
  ];

  // List<TransactionData> get txData {
  //   return [...transactions];
  // }
}

this is the code for transaction data

Answer 1

The problem is that TransactionData contains the following list:

  List<TransactionData> transactions = [
    TransactionData(
        id: 'tx1',
        price: "69.99",
        title: 'New Shoes',
        subtitle: DateTime.now()),
    TransactionData(
        id: 'tx2', price: "70.0", title: 'New Bois', subtitle: DateTime.now()),
  ];

Since this list will be initialized as part of the initialization of the TransactionData object we have created an endless loop because this list needs to create two TransactionData objects which then again requires the creating of new TransactionData objects and so on...

I am not sure what the purpose of this list is but the solution would be to either move it out of this class or make it eg static so there only exists one copy of the list which are shared between all TransactionData objects.