How to update main class widget from page in Flutter

Viewed 128

Here is my main class with pageview

class EditInvoice extends StatefulWidget {
  @override
  _EditInvoiceState createState() => _EditInvoiceState();
}

class _EditInvoiceState extends State<EditInvoice> {
  String strTotal = '0';
  @override
  void initState() {
    super.initState();
  }

  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  Widget buildPageView() {
    return PageView(
      controller: pageController,
      children: <Widget>[
        AddItems(),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.orange[600],
        elevation: 2.0,
        child: Icon(
          Icons.check,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.black, //change your color here
        ),
        automaticallyImplyLeading: false,
        toolbarHeight: 140.0,
        centerTitle: true,
        title: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.arrow_back)),
                Padding(padding: EdgeInsets.only(left: 30.0)),
                Align(
                  alignment: Alignment.center,
                  child: Text(
                    strTotal,
                    style: TextStyle(color: Colors.black),
                  ),
                )
              ],
            ),
          ],
        ),
        backgroundColor: Colors.white,
      ),
      body: buildPageView(),
    );
  }
}

class AddItems extends StatefulWidget {
  @override
  _AddItemsState createState() => _AddItemsState();
}

class _AddItemsState extends State<AddItems> {
  @override
  Widget build(BuildContext context) {
    var items = Padding(
        padding: EdgeInsets.only(left: 20.0, right: 20.0),
        child: TextFormField(
          decoration: InputDecoration(
            labelText: 'Amount',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5)),
            ),
          ),
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          cursorColor: Colors.black,
          keyboardType: TextInputType.phone,
        ));

    return Container(
      child: Card(
          child: Padding(
              padding: EdgeInsets.only(top: 10, bottom: 5.0, left: 10.0, right: 10.0),
              child: SingleChildScrollView(
                  child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
                Text(
                  'Add Items',
                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
                ),
                items,
              ])))),
    );
  }
}

I am implementing pageview in my Flutter application. I want to update the amount in main class whenever user entered value in TextFormField from pageview.

Here AddItems is the page added with pageview and EditInvoice is the main class.

I am new to Flutter application development.

2 Answers

you can give callback to from child widget to parent widget to update data, you can use inherited widget or provider

You can use the Provider Pattern:

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

class ProviderTest with ChangeNotifier {
  String amount = '';

  void updateAmount(String newAmount) {
    amount = newAmount;
    notifyListeners();
  }
}

class EditInvoice extends StatefulWidget {
  @override
  _EditInvoiceState createState() => _EditInvoiceState();
}

class _EditInvoiceState extends State<EditInvoice> {
  @override
  void initState() {
    super.initState();
  }

  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  Widget buildPageView() {
    return PageView(
      controller: pageController,
      children: <Widget>[
        AddItems(),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    var providerTest = Provider.of<ProviderTest>(context);

    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.orange[600],
        elevation: 2.0,
        child: Icon(
          Icons.check,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.black, //change your color here
        ),
        automaticallyImplyLeading: false,
        toolbarHeight: 140.0,
        centerTitle: true,
        title: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.arrow_back)),
                Padding(padding: EdgeInsets.only(left: 30.0)),
                Align(
                  alignment: Alignment.center,
                  child: Text(
                    providerTest.amount.toString(),
                    style: TextStyle(color: Colors.black),
                  ),
                )
              ],
            ),
          ],
        ),
        backgroundColor: Colors.white,
      ),
      body: buildPageView(),
    );
  }
}

class AddItems extends StatefulWidget {
  @override
  _AddItemsState createState() => _AddItemsState();
}

class _AddItemsState extends State<AddItems> {
  @override
  Widget build(BuildContext context) {
    var providerTest = Provider.of<ProviderTest>(context, listen: false);

    var items = Padding(
        padding: EdgeInsets.only(left: 20.0, right: 20.0),
        child: TextFormField(
          onChanged: (value) {
            providerTest.updateAmount(value);
          },
          decoration: InputDecoration(
            labelText: 'Amount',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(5)),
            ),
          ),
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 15,
          ),
          cursorColor: Colors.black,
          keyboardType: TextInputType.phone,
        ));

    return Container(
      child: Card(
          child: Padding(
              padding: EdgeInsets.only(top: 10, bottom: 5.0, left: 10.0, right: 10.0),
              child: SingleChildScrollView(
                  child: Column(mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
                Text(
                  'Add Items',
                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
                ),
                items,
              ])))),
    );
  }
}

And at main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ProviderTest(),
      child: MaterialApp(
        home: EditInvoice(),
      ),
    );
  }
}

More info about Provider Pattern here:

Provider Pattern

Related