Where to write the network call in Flutter?

Question

I have a BottomNavigationBar with 3 tabs. Consider I select a product in an e-commerce app from the pages inside the first BottomNavigationBarItem. I need to see that product in the second BottomNavigationBarItem(cart page). I have written the network call code in initState() of second BottomNavigationBarItem; but it will not be called when I go to that page and I can't see the recently added product to the cart. Is it better to write them in the build method itself? Writing them in the build method calls it every time I go to other tabs also.

You can store the cart items in a cart items list and then load the list in cart page. So in the first navigation, you add items to that list and in the second one, you load items. — gegobyte, May 11 '20 at 10:31
@gegobyte But, it goes into complexity of persisting that list and all... there isn't any other way? — nazaif, May 11 '20 at 10:37

score 0 · Answer 1 · answered May 11 '20 at 10:43

0

Use FutureBuilder or StreamBuilder to network call and flow the data to UI

answered May 11 '20 at 10:43

KumarSunil17

224
2
6

It has the same effect of writing the network call in the build method. Is it possible to call the build() method only when that tab is selected? @KumarSunil17 – nazaif May 12 '20 at 04:22

score 0 · Answer 2 · answered May 12 '20 at 08:37

Hope this will help you

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedPage = 0;
  String _selectedProduct;

  Widget getCurrentPage(){
    switch(_selectedPage){
      case 0:
        return Page1((selectedProduct){
          setState((){
          this._selectedProduct = selectedProduct;
            _selectedPage=1;
        });});
      case 1:
        return Page2(this._selectedProduct);
      case 2:
        return Page3();
      default:
        return Center(child:Text('Error'));
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: getCurrentPage(),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index){
          setState((){
            _selectedPage = index;
          });
        },
        currentIndex: _selectedPage,
      items: ['tab 1', 'tab 2', 'tab3'].map((e)=>BottomNavigationBarItem(
        icon: Container(),
      title: Text(e),
      )).toList(),),
    );
  }
}

class Page1 extends StatelessWidget {
  final Function(String) onProductClick;
  const Page1(this.onProductClick);  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 1')),
      body:Column(
      children: <Widget>[
        RaisedButton(
        child: Text('Product 1'),onPressed: ()=>onProductClick('Product 1'),),
        RaisedButton(
        child: Text('Product 2'),onPressed: ()=>onProductClick('Product 2'),),
        RaisedButton(
        child: Text('Product 3'),onPressed: ()=>onProductClick('Product 3'),),
        RaisedButton(
        child: Text('Product 4'),onPressed: ()=>onProductClick('Product 4'),),
        RaisedButton(
        child: Text('Product 5'),onPressed: ()=>onProductClick('Product 5'),),
      ],)
    );
  }
}
class Page2 extends StatelessWidget {

  final String selectedProduct;
  const Page2(this.selectedProduct);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 2')),
      body:Center(child:Text(selectedProduct??'Nothing selected')) 
    );
  }
}
class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('Page 3')),
      body:Center(child:Text('Page 3'))
    );
  }
}

Where to write the network call in Flutter?

2 Answers2