Home > database >  Why I'm not able to get the updated variable even using setstate inside the stateful widget. As
Why I'm not able to get the updated variable even using setstate inside the stateful widget. As

Time:11-25

Basically I want to change content on selecting the TabBar options. Here's my code. Also I'm new to flutter. I've also created a _incrementCounter() and getter setter methods. By using _incrementCounter() I'm returning an integer in order to update the PAgeView of my screen which is implemented inside a List called tabsCat. But on calling the _incrementCounter() method on line 264 it does not give the updated value please guide.

import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluttertravelapp/models/beach_model.dart';
import 'package:fluttertravelapp/models/new_category_model.dart';
import 'package:fluttertravelapp/models/popular_model.dart';
import 'package:fluttertravelapp/models/recommended_model.dart';
import 'package:fluttertravelapp/screens/selected_category_screen.dart';
import 'package:fluttertravelapp/screens/selected_place_screen.dart';
import 'package:fluttertravelapp/widgets/bottom_navigation_bar.dart';
import 'package:fluttertravelapp/widgets/custom_tab_indicator.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';


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

class _HomeScreenState extends State<HomeScreen> {
  int count = 0;

  // Creating the getter method
  // to get input from Field/Property
  int get getCount {
    return count;
  }

  // Creating the setter method
  // to set the input in Field/Property
  set setCount(int newCount) {
    count = newCount;
  }

  int _incrementCounter() {
    int index = 0;
    setState(() {
      index = getCount;
      print(index);
    });
    return index;
  }

  /// Page Controller
  final _pageController = PageController(viewportFraction: 0.877);

  @override
  Widget build(BuildContext context) {
    int tabIndex = 0;
    List tabsCat = [
      PageView(
        physics: BouncingScrollPhysics(),
        controller: _pageController,
        scrollDirection: Axis.horizontal,
        children: List.generate(
          recommendations.length,
              (int index) => GestureDetector(
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => SelectedCategoryScreen(
                      newCategoryModel: newCategories[index])));
            },
            child: Container(
              margin: EdgeInsets.only(right: 28.8),
              width: 333.6,
              height: 218.4,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(9.6),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage(newCategories[index].image),
                ),
              ),
              child: Stack(
                children: <Widget>[
                  Positioned(
                    bottom: 19.2,
                    left: 19.2,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4.8),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(
                            sigmaY: 19.2, sigmaX: 19.2),
                        child: Container(
                          height: 36,
                          padding: EdgeInsets.only(
                              left: 16.72, right: 14.4),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            children: <Widget>[
                              SvgPicture.asset(
                                  'assets/svg/icon_location.svg'),
                              SizedBox(
                                width: 9.52,
                              ),
                              Text(
                                recommendations[index].name,
                                style: GoogleFonts.lato(
                                    fontWeight: FontWeight.w700,
                                    color: Colors.white,
                                    fontSize: 16.8),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      PageView(
        physics: BouncingScrollPhysics(),
        controller: _pageController,
        scrollDirection: Axis.horizontal,
        children: List.generate(
          recommendations.length,
              (int index) => GestureDetector(
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => SelectedCategoryScreen(
                      newCategoryModel: newCategories[index])));
            },
            child: Container(
              margin: EdgeInsets.only(right: 28.8),
              width: 333.6,
              height: 218.4,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(9.6),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: CachedNetworkImageProvider(recommendations[index].image),
                ),
              ),
              child: Stack(
                children: <Widget>[
                  Positioned(
                    bottom: 19.2,
                    left: 19.2,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4.8),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(
                            sigmaY: 19.2, sigmaX: 19.2),
                        child: Container(
                          height: 36,
                          padding: EdgeInsets.only(
                              left: 16.72, right: 14.4),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            children: <Widget>[
                              SvgPicture.asset(
                                  'assets/svg/icon_location.svg'),
                              SizedBox(
                                width: 9.52,
                              ),
                              Text(
                                recommendations[index].name,
                                style: GoogleFonts.lato(
                                    fontWeight: FontWeight.w700,
                                    color: Colors.white,
                                    fontSize: 16.8),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    ];
    return Scaffold(
      //bottomNavigationBar: BottomNavigationBarTravel(),
      body: SafeArea(
        child: Container(
          child: ListView(
            physics: BouncingScrollPhysics(),
            children: <Widget>[
              /// Custom Navigation Drawer and Search Button
              Container(
                height: 57.6,
                margin: EdgeInsets.only(top: 28.8, left: 28.8, right: 28.8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[

                  ],
                ),
              ),

              /// Text Widget for Title
              Padding(
                padding: EdgeInsets.only(top: 0, left: 28.8),
                child: Text(
                  'Explore\nPakistan',
                  style: GoogleFonts.playfairDisplay(
                      fontSize: 45.6, fontWeight: FontWeight.w700),
                ),
              ),

              /// Custom Tab bar with Custom Indicator
              Column(
                children:
                [DefaultTabController(
                  length: 4,
                  child: TabBar(
                      labelPadding: EdgeInsets.only(left: 14.4, right: 14.4),
                      indicatorPadding:
                      EdgeInsets.only(left: 14.4, right: 14.4),
                      isScrollable: true,
                      labelColor: Color(0xFF000000),
                      unselectedLabelColor: Color(0xFF8a8a8a),
                      labelStyle: GoogleFonts.lato(
                          fontSize: 14, fontWeight: FontWeight.w700),
                      unselectedLabelStyle: GoogleFonts.lato(
                          fontSize: 14, fontWeight: FontWeight.w700),
                      indicator: RoundedRectangleTabIndicator(
                          color: Color(0xFF000000), weight: 2.4, width: 14.4),
                      onTap: (index){
                        setCount = index;
                        //print(getCount);
                      },

                      tabs: [
                        Tab(
                          child: Container(
                            child: Text('Recommended'),
                          ),
                        ),
                        Tab(
                          child: Container(
                            child: Text('Popular'),
                          ),
                        ),
                        Tab(
                          child: Container(
                            child: Text('New Destination'),
                          ),
                        ),
                        Tab(
                          child: Container(
                            child: Text('Hidden Gems'),
                          ),
                        )
                      ]),
                ),


              /// ListView widget with PageView
              /// Recommendations Section
              Container(
                height: 218.4,
                margin: EdgeInsets.only(top: 16),
                child: tabsCat[_incrementCounter()],
              ),
                ]),
              /// Dots Indicator
              /// Using SmoothPageIndicator Library
              Padding(
                padding: EdgeInsets.only(left: 28.8, top: 28.8),
                child: SmoothPageIndicator(
                  controller: _pageController,
                  count: recommendations.length,
                  effect: ExpandingDotsEffect(
                      activeDotColor: Color(0xFF8a8a8a),
                      dotColor: Color(0xFFababab),
                      dotHeight: 4.8,
                      dotWidth: 6,
                      spacing: 4.8),
                ),
              ),

              /// Text Widget for Popular Categories
              Padding(
                padding: EdgeInsets.only(top: 48, left: 28.8, right: 28.8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width*0.4,
                      child: FittedBox(
                        child: Text(
                          'Popular Categories',
                          style: GoogleFonts.playfairDisplay(
                            fontWeight: FontWeight.w700,
                            color: Color(0xFF000000),
                          ),
                        ),
                      ),
                    ),
                    Container(width: MediaQuery.of(context).size.width*0.1,
                      child: FittedBox(
                        child: Text(
                          'Show All ',
                          style: GoogleFonts.lato(
                            fontWeight: FontWeight.w500,
                            color: Color(0xFF8a8a8a),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),

              /// ListView for Popular Categories Section
              Container(
                margin: EdgeInsets.only(top: 33.6),
                height: 45.6,
                child: ListView.builder(
                  itemCount: populars.length,
                  scrollDirection: Axis.horizontal,
                  physics: BouncingScrollPhysics(),
                  padding: EdgeInsets.only(left: 28.8, right: 9.6),
                  itemBuilder: (context, index) {
                    return Container(
                      margin: EdgeInsets.only(right: 19.2),
                      height: 45.6,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(9.6),
                        color: Color(populars[index].color),
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(
                            width: 19.2,
                          ),
                          Image.asset(
                            populars[index].image,
                            height: 16.8,
                          ),
                          SizedBox(
                            width: 19.2,
                          )
                        ],
                      ),
                    );
                  },
                ),
              ),

              /// ListView for Beach Section
              Container(
                margin: EdgeInsets.only(top: 28.8, bottom: 16.8),
                height: 124.8,
                child: ListView.builder(
                  itemCount: beaches.length,
                  padding: EdgeInsets.only(left: 28.8, right: 12),
                  scrollDirection: Axis.horizontal,
                  physics: BouncingScrollPhysics(),
                  itemBuilder: (context, index) {
                    return Container(
                      height: 124.8,
                      width: 188.4,
                      margin: EdgeInsets.only(right: 16.8),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(9.6),
                        image: DecorationImage(
                          fit: BoxFit.cover,
                          image:
                          CachedNetworkImageProvider(beaches[index].image),
                        ),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Solve the error by calling the _incrementcounter method onto OnTap section. Here's my code changes:

Edited incrementcounter method and declare new method setNewCount,

  void setNewCount(int newCount) {
    count = newCount;
  }

  void _incrementCounter() {
    setState(() {
      count = getCount;
    });
  }

2nd change :

 onTap: (index){
  setNewCount(index);
  _incrementCounter();
},

3rd change:

Container(
   height: 218.4,
   margin: EdgeInsets.only(top: 16),
   child: tabsCat[count],
   ),

CodePudding user response:

Try

onTap: (index){
    setCount(index);
    //print(getCount);
},

instead of

onTap: (index){
    setCount = index;
    //print(getCount);
},
  • Related