Flutter inherited widget inside ListView item

Question

When i click qty plus on each item, Qty should plus on that item (But qty plus for all item) who have good idea please help me please thank you so much inherited_widget.dart import 'package:flutter/material.dart' ; import 'inherited_widget_data.dart' ; class MyInheritedWidget extends InheritedWidget { final Widget child; final MyInheritedWidgetDataState state; MyInheritedWidget({Key key, @required this .child, @required this .state}) : super (key: key, child: child); @override bool updateShouldNotify(MyInheritedWidget oldWidget) { return true ; } } inherited_widget_data.dart import 'package:flutter/material.dart' ; import 'inherited_widget.dart'; class MyInheritedWidgetData extends StatefulWidget { final Widget child; MyInheritedWidgetData({ @required this .child}); @override MyInheritedWidgetDataState createState() => MyInheritedWidgetDataState(); static MyInheritedWidgetDataState of( [BuildContext context, bool rebuild = true ]) { return (rebuild ? context.inheritFromWidgetOfExactType(MyInheritedWidget) as MyInheritedWidget : context.ancestorWidgetOfExactType(MyInheritedWidget) as MyInheritedWidget) .state; } } class MyInheritedWidgetDataState extends State { int badgeNumer = 0 , qty = 1 , i = 0 ; @override void initState() { super .initState(); } setbadgeNumer( int newbadgeNumer) { setState( () { badgeNumer = newbadgeNumer; }, ); } setQty( int newQty) { setState( () { qty += newQty; i += 1 ; }, ); } @override Widget build(BuildContext context) { return MyInheritedWidget(child: widget.child, state: this ); } } main.dart //*******************Dart System package******************* import 'dart:convert' ; import 'dart:io' ; import 'dart:typed_data' ; import 'package:device_info/device_info.dart' ; import 'package:flutter/material.dart' ; //*******************pub.dev package******************* import 'package:flutter_secure_storage/flutter_secure_storage.dart' ; import 'package:get_ip/get_ip.dart' ; import 'package:http/http.dart' as http; import 'package:carousel_slider/carousel_slider.dart' as carouse; //*******************Model package******************* import 'mainpage/hometab/inherited_widget_data.dart' ; import 'models/Viewproduct.dart' ; import 'services/fn.dart' ; //*******************Pages package******************* void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(), debugShowCheckedModeBanner: false , ); } } class HomePage extends StatefulWidget { HomePage({Key key}) : super (key: key); @override _HomePageState createState() => new _HomePageState(); } class _HomePageState extends State with SingleTickerProviderStateMixin { bool isBackButtonActivated = false ; //Event on page load @override void initState() { try { super .initState(); _tabController = TabController(vsync: this , length: myTabs.length); _tabController.addListener(() { print(_tabController.index); }); WidgetsBinding.instance.addPostFrameCallback((_) async { DeviceInfoPlugin deviceInfo = DeviceInfoPlugin(); AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo; Fn.deviceID = androidInfo.id; Fn.deviceName = androidInfo.model; Fn.ipaddress = await GetIp.ipAddress; countrycode = await storage.read(key: 'countrycode' ) ?? "+856" ; username = await storage.read(key: 'username' ); loginResultID = await storage.read(key: 'loginResultID' ); _refreshData(); //_asyncCheckAnotherLogin(); }); setState(() {}); } catch (e) { print(e.toString()); } } //**************************** Variable for toolbar **************************** static String appName = Fn.company_name + ' © 2019' ; Widget appBarTitle = new Text(appName); Icon actionIcon = new Icon(Icons.search); static Color colorToolbar = Colors.deepOrange; int badgeNumer = 0 ; //**************************** Variable for login **************************** String countrycode, username, password, loginResultID = "" , isAnotherLoginResultID = "" ; var txtusername = TextEditingController(); var txtpassword = TextEditingController(); final txtusername_focus = FocusNode(); final txtpassword_focus = FocusNode(); bool emailValid = false , firstLoad = true , isLogin = false , password_visibility = false , loadhometabeFail = false , isAnotherLogin = false ; //**************************** Variable for home tabe **************************** final List myTabs = [ Tab( icon: Icon(IconData( 0xe88a , fontFamily: 'MaterialIcons' )), //text: 'Home', ), Tab( icon: Icon( IconData( 57573 , fontFamily: 'MaterialIcons' ), ), //text: 'Feed', ), Tab( icon: Icon(IconData( 59638 , fontFamily: 'MaterialIcons' )), //text: 'Promotion', ), ]; TabController _tabController; ScrollController _scrollController; final GlobalKey _refreshIndicatorKey = new GlobalKey (); final storage = new FlutterSecureStorage(); List homeTabdata; Uint8List _bytes(String b64) { try { return base64.decode(b64); } catch (e) { print(e.toString()); } } Future > _getData() async { try { var photo = RegViewproduct(); //photo.albumId = '1'; String js = regViewproductToJson([photo]); //print(js); var rsp = await http.post(Fn.ihost.host + '/sale/vw_product.php' , body: js, headers: {HttpHeaders.contentTypeHeader: 'application/json' }); //print(rsp.body); return regViewproductFromJson(rsp.body); } catch (e) { print(e.toString()); loadhometabeFail = e.toString() != null ; } } Future _refreshData() { try { return _getData().then((onValue) { //print(onValue); setState(() { homeTabdata = onValue; }); }); } catch (e) { print(e.toString()); } } @override Widget build(BuildContext context) { return MyInheritedWidgetData( child: MaterialApp( theme: ThemeData( primarySwatch: colorToolbar, //primaryColor: Colors.deepOrange, //Changing this will change the color of the TabBar brightness: Brightness.light, accentColor: Colors.green, ), debugShowCheckedModeBanner: false , home: DefaultTabController( length: 1 , child: WillPopScope( onWillPop: () async => false , child: Scaffold( appBar: AppBar( centerTitle: true , title: appBarTitle, actions: [ new IconButton( icon: actionIcon, onPressed: () { setState(() { if ( this .actionIcon.icon == Icons.search) { this .actionIcon = new Icon(Icons.close); this .appBarTitle = new TextField( autofocus: true , style: new TextStyle( color: Colors.white, ), decoration: new InputDecoration( prefixIcon: new Icon(Icons.search, color: Colors.white), hintText: 'Search in ' + Fn.company_name + ' ...' , hintStyle: new TextStyle(color: Colors.white), ), ); } else { this .actionIcon = new Icon(Icons.search); this .appBarTitle = new Text(appName); } }); }, ), WidgetCartBadge(), ], ), body: TabBarView( controller: _tabController, children: [ homeTabdata != null ? RefreshIndicator( key: _refreshIndicatorKey, onRefresh: _refreshData, child: ListView( controller: _scrollController, children: [ //************************* Image slider ************************* Container( decoration: const BoxDecoration( border: Border( top: BorderSide( width: 1.0 , color: Color( 0xFFFFFFFFFF )), left: BorderSide( width: 1.0 , color: Color( 0xFFFFFFFFFF )), right: BorderSide( width: 1.0 , color: Color( 0xFFFF000000 )), bottom: BorderSide( width: 5.0 , color: Colors.grey, ), ), ), child: Padding( padding: const EdgeInsets.fromLTRB( 0 , 2 , 0 , 4 ), child: carouse.CarouselSlider( height: 150.0 , aspectRatio: 16 / 9 , viewportFraction: 0.9 , initialPage: 0 , enableInfiniteScroll: true , reverse: false , autoPlay: true , autoPlayInterval: Duration(seconds: 7 ), autoPlayAnimationDuration: Duration(seconds: 3 ), //autoPlayCurve: Curve.fastOutSlowIn, pauseAutoPlayOnTouch: Duration(seconds: 7 ), enlargeCenterPage: true , //onPageChanged: callbackFunction, scrollDirection: Axis.horizontal, items: homeTabdata.map( (i) { return Builder( builder: (BuildContext context) { return Container( alignment: Alignment.bottomCenter, width: MediaQuery.of(context) .size .width, margin: EdgeInsets.symmetric( horizontal: 5.0 ), decoration: BoxDecoration( image: new DecorationImage( image: i.productImgBase64 .trim() != null ? MemoryImage(_bytes(i .productImgBase64)) : Container(), fit: BoxFit.cover), color: Colors.amber), child: Padding( padding: const EdgeInsets.all( 8.0 ), child: new Text( i.productBillName, style: new TextStyle( fontSize: 16.0 ), ), ), ); }, ); }, ).toList(), ), ), ), //************************* Product menu ************************* Container( child: ListView( shrinkWrap: true , //crossAxisCount: 2, physics: ScrollPhysics(), children: homeTabdata .getRange( 0 , homeTabdata.length) .map( (f) { return Container( key: UniqueKey(), decoration: const BoxDecoration( border: Border( bottom: BorderSide( width: 5.0 , color: Colors.grey, ), ), ), child: Column( key: UniqueKey(), children: [ Card( key: UniqueKey(), elevation: 0.0 , shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular( 5.0 ))), child: Image.memory( _bytes(f.productImgBase64), fit: BoxFit.cover, height: 250.0 , width: MediaQuery.of(context) .size .width, ), clipBehavior: Clip.antiAlias, margin: EdgeInsets.all( 0.0 ), ), Text( f.productBillName, style: TextStyle(fontSize: 16 ), textAlign: TextAlign.center, ), Container( decoration: const BoxDecoration( border: Border( top: BorderSide( width: 1.0 , color: Colors.grey)), ), child: Row( key: UniqueKey(), mainAxisAlignment: MainAxisAlignment.end, children: [ ButtonTheme.bar( key: UniqueKey(), child: ButtonBar( key: UniqueKey(), children: [ FlatButton( key: UniqueKey(), shape: new RoundedRectangleBorder( borderRadius: new BorderRadius .circular( Fn.btnRadius), ), child: IconButton( onPressed: () { setState(() { f.reqqty = ( int .parse(f.reqqty) > 1 ? int .parse(f.reqqty) - 1 : 1 ) .toString(); }); }, icon: Icon(Icons .remove_circle_outline), ), onPressed: () {}, ), WidgetQty(), // Container( // decoration: BoxDecoration( // color: new Color( // 0x000000)), // child: Text( // f.reqqty, // style: TextStyle( // fontSize: 30, // ), // ), // ), WidgetbtnQtyMore(), // FlatButton( // shape: new RoundedRectangleBorder( // borderRadius: // new BorderRadius // .circular( // Fn.btnRadius)), // child: IconButton( // onPressed: () { // setState(() { // f.reqqty = (int.parse( // f.reqqty) + // 1) // .toString(); // }); // }, // icon: Icon(Icons // .add_circle_outline), // ), // onPressed: () {}, // ), WidgetbtnAddToCart(), ], ), ) ], ), ), ], ), ); }, ).toList(), ), ), ], ), ) : !loadhometabeFail ? Container( color: Colors.blue[ 700 ], child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator( valueColor: new AlwaysStoppedAnimation ( Colors.green), ), Padding( padding: const EdgeInsets.only(top: 20.0 ), ), Text( 'Loading......' , style: TextStyle( color: Colors.white, ), ), ], ), ) : Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.warning), Padding( padding: const EdgeInsets.fromLTRB( 0.0 , 20.0 , 0 , 0 ), child: Text( ':) Problem with connection....!' ), ), Padding( padding: const EdgeInsets.fromLTRB( 10 , 20 , 0 , 0 ), child: ListTile( title: Text( 'Try again' , style: TextStyle( decoration: TextDecoration.underline, ), textAlign: TextAlign.center, ), onTap: () { setState(() { loadhometabeFail = false ; }); _refreshData(); }, ), ), ], ), ), Column( children: [ Icon(IconData( 57573 , fontFamily: 'MaterialIcons' )), ], ), Column( children: [ Icon(IconData( 59638 , fontFamily: 'MaterialIcons' )), ], ), ], ), //************************* Bottom Toolbar ************************* bottomNavigationBar: Container( decoration: const BoxDecoration( //color: Colors.deepOrange, border: Border( left: BorderSide(width: 0.0 , color: Color( 0xFFFFFFFFFF )), right: BorderSide(width: 0.0 , color: Color( 0xFFFF000000 )), top: BorderSide( width: 2.0 , color: Colors.grey, ), bottom: BorderSide(width: 0.0 , color: Color( 0xFFFFFFFFFF )), ), ), child: TabBar( controller: _tabController, tabs: myTabs, labelColor: Colors.grey[ 700 ], //unselectedLabelColor: colorToolbar, indicatorSize: TabBarIndicatorSize.label, indicatorPadding: EdgeInsets.all( 5.0 ), indicatorColor: Colors.red, indicatorWeight: 0.1 , onTap: (index) { // print(index); // Toast.show( // 'msg : ' + index.toString(), // context, // duration: Toast.TOP, // gravity: Toast.LENGTH_LONG, // ); }, //controller: Text('data'), ), ), ), ), ), ), ); } } class WidgetQty extends StatelessWidget { @override Widget build(BuildContext context) { final MyInheritedWidgetDataState state = MyInheritedWidgetData.of(context); print( "build Widget WidgetQty" + state.i.toString()); return Container( key: UniqueKey(), decoration: BoxDecoration(color: new Color( 0x000000 )), child: Text( state.qty.toString(), style: TextStyle( fontSize: 30 , ), ), ); } } class WidgetbtnQtyMore extends StatelessWidget { @override Widget build(BuildContext context) { print( "build Widget WidgetQtyMore" ); final MyInheritedWidgetDataState state = MyInheritedWidgetData.of(context, false ); return FlatButton( key: UniqueKey(), shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(Fn.btnRadius)), child: IconButton( key: UniqueKey(), onPressed: () { state.setQty( 1 ); return ; }, icon: Icon(Icons.add_circle_outline), ), onPressed: () {}, ); } } class WidgetCartBadge extends StatelessWidget { @override Widget build(BuildContext context) { final MyInheritedWidgetDataState widget = MyInheritedWidgetData.of(context); return Stack( children: [ IconButton( onPressed: () {}, icon: Icon(Icons.shopping_cart), ), widget.badgeNumer > 0 ? Positioned( right: 1 , top: 11 , child: new Container( padding: EdgeInsets.all( 2 ), decoration: new BoxDecoration( color: Colors.green, borderRadius: BorderRadius.circular( 6 ), ), constraints: BoxConstraints( minWidth: 14 , minHeight: 14 , ), child: Text( widget.badgeNumer.toString(), style: TextStyle( color: Colors.white, fontSize: 8 , ), textAlign: TextAlign.center, ), ), ) : Container(), ], ); } } class WidgetbtnAddToCart extends StatelessWidget { @override Widget build(BuildContext context) { final _HomePageState _homePageState = _HomePageState(); final MyInheritedWidgetDataState state = MyInheritedWidgetData.of(context, false ); return FlatButton( shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(Fn.btnRadius)), child: IconButton( onPressed: () { state.setbadgeNumer( 2 ); _homePageState.badgeNumer = state.badgeNumer; print(_homePageState.badgeNumer); }, icon: Icon(Icons.shopping_cart), ), onPressed: () {}, ); } }

showvalyxiong VANGTOUAXIONG · Answer

Thank you Laxmidhar Now i change to use Rxdart but result is the same and these is the short point of code, The reason is i have a list of json and loop it to return a list of card widget as homeTabdata . getRange ( 0 , homeTabdata.length) . map ( (f) { //returm card widget }); and when i click (increment or decrease qty button) on each card, qty should increment on that row (but not) it increment on all row --------------------Model-------------------- Viewproduct.dart // To parse this JSON data, do // // final regViewproduct = regViewproductFromJson(jsonString); import 'dart:convert' ; List RegViewproduct > regViewproductFromJson ( String str) => List RegViewproduct >. from (json. decode (str). map ((x) => RegViewproduct . fromJson (x))); String regViewproductToJson ( List RegViewproduct > data) => json. encode ( List dynamic >. from (data. map ((x) => x. toJson ()))); class RegViewproduct { String productcode; String barcode; String productName; String productBillName; String productname; String productWide; String productLong; String productHigh; String productWeight; String productColor; String productTypeflag; String productTypeid; String typename; String cateid; String categoryname; String productBrandid; String brandname; String productVatcode; String productActive; String accid; String acccode; String accnamelao; String saleprice; String productSaleVatcode; String productSaleVatrate; String saleVatname; String productImg; String productUnitid; String unitname; String cansale; String selected; String reqqty; String listno; String cuscode; String custypeid; String custypeName; String stock; String warehouseCode; String wname; String locationcode; String locname; String lotcode; String lotExpiredate; String saleqty; String productImgBase64; RegViewproduct ({ this .productcode, this .barcode, this .productName, this .productBillName, this .productname, this .productWide, this .productLong, this .productHigh, this .productWeight, this .productColor, this .productTypeflag, this .productTypeid, this .typename, this .cateid, this .categoryname, this .productBrandid, this .brandname, this .productVatcode, this .productActive, this .accid, this .acccode, this .accnamelao, this .saleprice, this .productSaleVatcode, this .productSaleVatrate, this .saleVatname, this .productUnitid, this .unitname, this .cansale, this .selected, this .reqqty, this .listno, this .cuscode, this .custypeid, this .custypeName, this .stock, this .warehouseCode, this .wname, this .locationcode, this .locname, this .lotcode, this .lotExpiredate, this .saleqty, this .productImgBase64, }); factory RegViewproduct . fromJson ( Map String , dynamic > json) => RegViewproduct ( productcode: json[ "productcode" ], barcode: json[ "barcode" ], productName: json[ "product_name" ], productBillName: json[ "product_bill_name" ], productname: json[ "productname" ], productWide: json[ "product_wide" ], productLong: json[ "product_long" ], productHigh: json[ "product_high" ], productWeight: json[ "product_weight" ], productColor: json[ "product_color" ], productTypeflag: json[ "product_typeflag" ], productTypeid: json[ "product_typeid" ], typename: json[ "typename" ], cateid: json[ "cateid" ], categoryname: json[ "categoryname" ], productBrandid: json[ "product_brandid" ], brandname: json[ "brandname" ], productVatcode: json[ "product_vatcode" ], productActive: json[ "product_active" ], accid: json[ "accid" ], acccode: json[ "acccode" ], accnamelao: json[ "accnamelao" ], saleprice: json[ "saleprice" ], productSaleVatcode: json[ "product_sale_vatcode" ], productSaleVatrate: json[ "product_sale_vatrate" ], saleVatname: json[ "sale_vatname" ], productUnitid: json[ "product_unitid" ], unitname: json[ "unitname" ], cansale: json[ "cansale" ], selected: json[ "selected" ], reqqty: json[ "reqqty" ], listno: json[ "listno" ], cuscode: json[ "cuscode" ], custypeid: json[ "custypeid" ], custypeName: json[ "custype_name" ], stock: json[ "stock" ], warehouseCode: json[ "warehouse_code" ], wname: json[ "wname" ], locationcode: json[ "locationcode" ], locname: json[ "locname" ], lotcode: json[ "lotcode" ], lotExpiredate: json[ "lot_expiredate" ], saleqty: json[ "saleqty" ], productImgBase64: json[ "product_img_base64" ], ); Map String , dynamic > toJson () => { "productcode" : productcode, "barcode" : barcode, "product_name" : productName, "product_bill_name" : productBillName, "productname" : productname, "product_wide" : productWide, "product_long" : productLong, "product_high" : productHigh, "product_weight" : productWeight, "product_color" : productColor, "product_typeflag" : productTypeflag, "product_typeid" : productTypeid, "typename" : typename, "cateid" : cateid, "categoryname" : categoryname, "product_brandid" : productBrandid, "brandname" : brandname, "product_vatcode" : productVatcode, "product_active" : productActive, "accid" : accid, "acccode" : acccode, "accnamelao" : accnamelao, "saleprice" : saleprice, "product_sale_vatcode" : productSaleVatcode, "product_sale_vatrate" : productSaleVatrate, "sale_vatname" : saleVatname, "product_unitid" : productUnitid, "unitname" : unitname, "cansale" : cansale, "selected" : selected, "reqqty" : reqqty, "listno" : listno, "cuscode" : cuscode, "custypeid" : custypeid, "custype_name" : custypeName, "stock" : stock, "warehouse_code" : warehouseCode, "wname" : wname, "locationcode" : locationcode, "locname" : locname, "lotcode" : lotcode, "lot_expiredate" : lotExpiredate, "saleqty" : saleqty, "product_img_base64" : productImgBase64, }; } RxdartState.dart import 'package:rxdart/rxdart.dart' ; import 'main.dart' ; class Counter { MyHomePageState xx; var _counter = BehaviorSubject int >. seeded ( 0 ); Observable get stream => _counter.stream; int get current => _counter.value; increment ( int i) async { _counter.value = i; _counter. add (i + 1 ); } decrease ( int i) async { _counter.value = i; _counter. add (i > 1 ? i - 1 : 1 ); } } main.dart import 'package:get_it/get_it.dart' ; var getIt = GetIt .instance; void main () { getIt. registerSingleton Counter >( Counter ()); runApp ( MyApp ()); } class MyHomePage extends StatefulWidget { @override MyHomePageState createState () => MyHomePageState (); } class MyHomePageState extends State MyHomePage >{ final counter = getIt. get Counter >(); List RegViewproduct > homeTabdata; Container ( child: ListView ( shrinkWrap: true , //crossAxisCount: 2, physics: ScrollPhysics (), children: homeTabdata . getRange ( 0 , homeTabdata.length) . map ( (f) { return Container ( decoration: const BoxDecoration ( border: Border ( bottom: BorderSide ( width: 5.0 , color: Colors .grey, ), ), ), child: Column ( children: Widget >[ Card ( elevation: 0.0 , shape: RoundedRectangleBorder ( borderRadius: BorderRadius . all ( Radius . circular ( 5.0 ))), child: Image . memory ( _bytes (f.productImgBase64), fit: BoxFit .cover, height: 250.0 , width: MediaQuery . of (context) .size .width, ), clipBehavior: Clip .antiAlias, margin: EdgeInsets . all ( 0.0 ), ), Text ( f.productBillName + ' [ ₭ ' + f.saleprice. toString () + ' ]' , style: TextStyle (fontSize: 16 ), textAlign: TextAlign .center, ), Container ( decoration: const BoxDecoration ( border: Border ( top: BorderSide ( width: 1.0 , color: Colors .grey)), ), child: Row ( mainAxisAlignment: MainAxisAlignment .end, children: Widget >[ ButtonTheme . bar ( child: ButtonBar ( children: Widget >[ //Decrease qty FlatButton ( shape: new RoundedRectangleBorder ( borderRadius: new BorderRadius . circular ( Fn .btnRadius), ), child: IconButton ( onPressed: () { eventingProductcode = f.productcode; counter. decrease ( int . parse ( f.reqqty, ), ); }, icon: Icon ( Icons .remove_circle_outline), ), onPressed: () {}, ), //Qty StreamBuilder ( stream: counter.stream, builder: (context, snapshot) { return Container ( decoration: BoxDecoration ( color: new Color ( 0x000000 ), ), child: Text ( (f.reqqty = '${ counter.current }' ), style: TextStyle ( fontSize: 30 , ), ), ); }, ), //Increment qty FlatButton ( shape: new RoundedRectangleBorder ( borderRadius: new BorderRadius . circular ( Fn .btnRadius), ), child: IconButton ( onPressed: () async { eventingProductcode = f.productcode; counter. increment ( int . parse ( f.reqqty, ), ); }, icon: Icon ( Icons .add_circle_outline), ), onPressed: () {}, ), //Add to cart FlatButton ( shape: new RoundedRectangleBorder ( borderRadius: new BorderRadius . circular ( Fn .btnRadius)), child: IconButton ( onPressed: () { setState (() { badgeNumer += int . parse ( f.reqqty); print (badgeNumer); f.reqqty = '1' ; }); }, icon: Icon ( Icons .shopping_cart), ), onPressed: () {}, ), ], ), ) ], ), ), ], ), ); }, ). toList (), ), )}

Laxmidhar Sahoo · Answer

It is deficault to explain the solution in the huge code .place a break point and convey the error point or line