如何从另一个小部件更改有状态小部件中变量的值

Question

I have a variable inside a statefull widget which contains a string value. I called a widget from another dart file. I need to change the value of the variable in statefull widget from this widget. I have tries valuelistanablebuilder but it is only listen to value when function called inside that dart file. Please tell me a way and example code on how to do it.

import 'package:flutter/material.dart';
import 'package:messaging_service/components/app_bar.dart';
import 'package:messaging_service/components/home_pages/all_messages.dart';
import 'package:messaging_service/components/home_pages/stories.dart';
import 'package:messaging_service/components/search_bar.dart';
import 'package:messaging_service/components/strings.dart';
import 'package:messaging_service/components/style.dart';

class HomeMobile extends StatefulWidget {
  const HomeMobile({Key? key}) : super(key: key);

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

class _HomeMobileState extends State<HomeMobile> {
  var currentPage = 'all';
  TextEditingController searchChatController = TextEditingController();
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: lightColor,
      appBar: AppBarHomeMobile(context),
      body: SingleChildScrollView(
        child: Column(
          children: [
            AppBarHomeExtend(),
            const SizedBox(
              height: 10,
            ),
            //To Call a Widget
          ],
        ),
      ),
    );
  }
}

In this AppBarHomeExtend() has some buttons..

Widget AppBarHomeExtend() {
  return Container(
    height: 80,
    decoration: BoxDecoration(
        color: lightColor,
        boxShadow: [
          BoxShadow(color: darkColor, blurRadius: 5),
        ],
        borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(35), bottomRight: Radius.circular(35))),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        HRButtons('All Messages', () {}),
        HRButtons('Groups', () {  }),
        HRButtons('Stories', () {}),
        HRButtons('Calls', () {}),
      ],
    ),
  );
}

When called these buttons I need to change the value of variable currentPage from that statefull widget.

Answer 1

First, turn your AppBarHomeExtend into a proper widget which takes a callback function as argument:

import 'package:flutter/material.dart';

class ExtendedAppBar extends StatelessWidget {
  final void Function(String) setPage;

  const ExtendedAppBar({Key? key, required this.setPage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
      decoration: BoxDecoration(
          color: Colors.blue.shade50,
          boxShadow: [
            BoxShadow(color: Colors.blue.shade900, blurRadius: 5),
          ],
          borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(35), bottomRight: Radius.circular(35))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          HRButtons('All Messages', () => setPage('All Messages')),
          HRButtons('Groups', () => setPage('Groups')),
          HRButtons('Stories', () => setPage('Stories')),
          HRButtons('Calls', () => setPage('Calls')),
        ],
      ),
    );
  }
}

Then in your _HomeMobileState class, use this:

ExtendedAppBar(
  setPage: (String value) {
    setState(() {
      currentPage = value;
    });
  },
),

Answer 2

you better need to use a state management to get a better solution . check this package

 floatingActionButton: FloatingActionButton(
    key: const Key('increment_floatingActionButton'),

    /// Calls `context.read` instead of `context.watch` so that it does not rebuild
    /// when [Counter] changes.
    onPressed: () => context.read<Counter>().increment(),
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ),

---

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

  @override
  Widget build(BuildContext context) {
     return Text(

    /// Calls `context.watch` to make [Count] rebuild when [Counter]      changes.
       '${context.watch<Counter>().count}',
        key: const Key('counterState'),
        style: Theme.of(context).textTheme.headline4);
  }
}