Callback from child to parent Flutter

Question

I am new to flutter. I am trying to separate the bottomappbar widget from my home screen. Thing is, it is I need to send back the index to the home screen file so I can switch the body of the screen. I've been learning BloC lately, but I think it is an overkill for this case, even though I am going to use it in other parts of the app (hopefully this is the right assumption). So, how can I send the index to the parent?

Parent

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final _bottomNavigationPages = [
    Screen1(),
    Screen2(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.blueGrey,
        ),
        title:
            Text('xxx', style: new TextStyle(fontWeight: FontWeight.w400)),
      ),
      body: _bottomNavigationPages[_selectedIndex],
      bottomNavigationBar: HomeBottomAppBar(),
    );
  }
}

Child

class HomeBottomAppBar extends StatefulWidget {
  @override
  _HomeBottomAppBarState createState() => _HomeBottomAppBarState();
}

class _HomeBottomAppBarState extends State<HomeBottomAppBar> {
  int _selectedIndex = 0;

  void _itemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.x), title: Text("1")),
          BottomNavigationBarItem(
              icon: Icon(Icons.x), title: Text("2")),
        ],
        currentIndex: _selectedIndex,
        onTap: _itemTapped,
      ),
    );
  }
}

Also, I am going under the assumption that this is good practice. Maybe it is just better to have everything in the same file.

score 7 · Accepted Answer · answered Jul 06 '19 at 17:17

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final _bottomNavigationPages = [
    Screen1(),
    Screen2(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.blueGrey),
        title: Text('xxx', style: new TextStyle(fontWeight: FontWeight.w400)),
      ),
      body: _bottomNavigationPages[_selectedIndex],
      bottomNavigationBar: HomeBottomAppBar(refresh: _refresh),
    );
  }

  void _refresh(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

class HomeBottomAppBar extends StatefulWidget {
  final Function refresh;

  const HomeBottomAppBar({Key key, this.refresh}) : super(key: key);

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

class _HomeBottomAppBarState extends State<HomeBottomAppBar> {
  int _selectedIndex = 0;

  void _itemTapped(int index) {
    _selectedIndex = index;
    widget.refresh(index);
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.x), title: Text("1")),
          BottomNavigationBarItem(icon: Icon(Icons.x), title: Text("2")),
        ],
        currentIndex: _selectedIndex,
        onTap: _itemTapped,
      ),
    );
  }
}

Callback from child to parent Flutter

1 Answers1