Passing data from one widget to another in the same tree - flutter

In my flutter app I need to pass on data from a widget to another widget. Both are encapsulated in a Column widget, the diagram below best describes it
I've tried using inherited widget, but that doesn't seem to help, here's the code for the inherited widget I created:
import 'package:flutter/material.dart';
class updateMonth extends StatefulWidget {
final Widget child;
const updateMonth({Key? key,required this.child}) : super(key: key);
#override
_updateMonthState createState() => _updateMonthState();
}
class _updateMonthState extends State<updateMonth> {
int month=DateTime.now().month;
void updMonth(int newMonth){
setState(() =>
month=newMonth
);
}
#override
Widget build(BuildContext context)=>monthFromCal(
child: widget.child,
month: month,
newMonth: this,
);
}
class monthFromCal extends InheritedWidget {
final int month;
final _updateMonthState newMonth;
const monthFromCal({
Key? key,
required Widget child,
required this.month,
required this.newMonth
}) : super(key: key, child: child);
static _updateMonthState of(BuildContext context)=>context
.dependOnInheritedWidgetOfExactType<monthFromCal>()!.newMonth; //NULL CHECK
#override
bool updateShouldNotify(monthFromCal old) {
return old.month!=month;
}
}
updateMonth() is a stateful widget that is supposed to receive and update the value of month, which would then be passed on to the inherited widget monthFromCal(). When I run this, I get "null check operator used on a null value" error. For your ref, here are the two widgets:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
TableCalendar(
focusedDay: _focusedDay, ///DateTime _focusedDay=DateTime.now();
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
setState(() {
monthFromCal.of(context).updMonth(_focusedDay.month);
});
},
),
Container(
height: MediaQuery.of(context).size.height*0.3,
width: MediaQuery.of(context).size.width,
child: monthEvents(month: DateTime.now().month,),
),
],
),
How can I solve this ? Is there any other way of passing the value ?
Thanks in advance

What you are really looking for is a function not a widget here is the solution :
Declare the function somewhere
int updateMonth(int month) => month = DateTime.now().month;
& then just call it wherever you want - it will take data & return it as you're requesting
updateMonth(_focusedDay);
the only issue is - i don't really get what you're trying to calculate but this is the solution to your problem

Related

Pass Index from Carousel Widget to Another Widget Flutter

I am new to Flutter and stumped on how to do this. I have a screen that has a Carousel Slider widget on it that I am holding in a separate file/widget to keep the code as clean as possible. To that Carousel I am passing a List which are urls of images and videos. I have already implemented an indicator bar and have the index of the list held within activeIndex variable within the Carousel widget. I then need to pass that index value to a separate widget held in a variable on the main page of my app (one with the clean code).
I basically need help on where to define variables in one widget that I can then define and pass to multiple other widgets. Please let me know if you need more context as I am new to coding in general. Thanks!
Carousel Widget
class AssetCarouselBuilder extends StatefulWidget {
const AssetCarouselBuilder({
#required this.assets,
this.activeIndex
});
final List<String> assets;
final int activeIndex;
#override
State<AssetCarouselBuilder> createState() => _AssetCarouselBuilderState();
}
class _AssetCarouselBuilderState extends State<AssetCarouselBuilder> {
int activeIndex = 0;
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CarouselSlider.builder(itemCount: widget.assets.length,
itemBuilder: (context, index, realIndex){
final assetUrl = widget.assets[index];
options: CarouselOptions(
onPageChanged: (index, reason) =>
setState (() => activeIndex = index)
//this is where I am holding the variable 'activeIndex' that I need elsewhere
if (assetUrl.contains('jpg')) {
return buildImage(assetUrl, index);
}
const SizedBox(height: 5),
buildIndicator(),
Widget buildImage(String imageUrl, int index) => Image(),
Widget buildIndicator() => AnimatedSmoothIndicator(
activeIndex: activeIndex,
count: widget.assets.length,
effect: ColorTransitionEffect()
Implementation of Carousel on "main page"
class FeedPageWidget extends StatefulWidget {
const FeedPageWidget({
Key key,
}) : super(key: key);
#override
_FeedPageWidgetState createState() => _FeedPageWidgetState();
}
class _FeedPageWidgetState extends State<FeedPageWidget>
int _currentIndex = 0;
AssetCarouselBuilder(assets: listViewPostsRecord.postAssets.asList())
And then widget I need to pass the index to another widget on the "main page".
ShareMenuWidget(
postRef: listViewPostsRecord,
assetIndex: _currentIndex)
Any help on how I get the "activeIndex" value on the setState function in the Carousel slider is very appreciated!
You can use callback method like Function(int activeIndex)? onIndexChanged;.
class CarouselCW extends StatefulWidget {
final Function(int activeIndex)? onIndexChanged;
const CarouselCW({
Key? key,
this.onIndexChanged,
}) : super(key: key);
#override
State<CarouselCW> createState() => _CarouselCWState();
}
class _CarouselCWState extends State<CarouselCW> {
final CarouselController carouselController = CarouselController();
#override
Widget build(BuildContext context) {
return CarouselSlider.builder(
itemCount: 4,
itemBuilder: (BuildContext context, int index, int realIndex) {
return Text(
index.toString(),
);
},
options: CarouselOptions(
onPageChanged: (index, reason) {
if (widget.onIndexChanged != null) widget.onIndexChanged!(index);
},
),
);
}
}
And while using this widget you will get
CarouselCW(
onIndexChanged: (activeIndex) {
print(activeIndex.toString());
},
)

CheckBox ui is not updated though the item value of checkbox is updated, Getx flutter

Get the working code sample here
I have an RxList of addOnProducts which contains product and selected attributes.
I am trying to implement the simple multiSelectable grid View, but on clicking the checkBox the selected attribute changes but it is not reflected back to the ui,
If i refresh it will be updated.
I tried Obx()=> (); widget , It is still not updating
My ProductController
class ProductsController extends GetxController {
late Worker worker;
static ProductsController instance = Get.find();
RxList<ProductModel> products = RxList<ProductModel>([]);
RxList<CheckProduct> addOnProducts = <CheckProduct>[].obs;
String collection = "products";
#override
void onReady() {
super.onReady();
products.bindStream(getAllProducts());
worker = once(products, (List<ProductModel> value) {
fillAddOnProducts(value);
}, condition: () => products.isNotEmpty);
}
Stream<List<ProductModel>> getAllProducts() => FirebaseFirestore.instance
.collection(collection)
.snapshots()
.map((query) => query.docs
.map((item) => ProductModel.fromMap(item.data(), item.id))
.toList());
void fillAddOnProducts(List<ProductModel> products) => {
products.forEach((element) {
addOnProducts.add(CheckProduct(product: element, selected: false));
})
};
}
class CheckProduct {
ProductModel product;
bool selected;
CheckProduct(
{required ProductModel this.product, required bool this.selected});
}
My Grid View
class AddOns extends StatelessWidget {
const AddOns({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [],
title: Text("Select Addons"),
),
body: Obx(() => GridView.count(
crossAxisCount: 2,
children: productsController.addOnProducts
.map((element) => ProductWidget(product: element))
.toList(),
)));
}
}
class ProductWidget extends StatelessWidget {
final CheckProduct product;
const ProductWidget({Key? key, required this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
margin: EdgeInsets.all(10),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 4,
left: 4,
child: Checkbox(
value: product.selected,
onChanged: (value) {
print("value of the value is : $value");
print("value of product selected before is: " +
product.selected.toString());
product.selected = value!;
print("value of product selected after is: " +
product.selected.toString());
},
),
),
],
));
}
}
Therefore in the console it is :
I/flutter (20067): value of the value is : true
I/flutter (20067): value of product selected before is: false
I/flutter (20067): value of product selected after is: true
But the checkBox is not updating, it updates only when i refresh, How to overCome this? Adding Obx() to the parent isn't helping..
Find the github link to code below here which has just the question and and the problem faced..
After going through your code. I've implemented the following that will change state without hot reload:
In your main dart you do not need to put your product controller here as you are not using it
main.dart
import 'package:flutter/material.dart';
import 'grid.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GridSelect(),
);
}
}
Next, I have changed your grid class to generate a list of product widget as the size of the addProduct list length. In my opinion this is a better way to write GridView counts children. Remove obx from your gridview and change your stateful widget to stateless as you are using Getx. It will manage your state even in a stateless widget. Add your product controller here as you will access addProduct list from the controller class.
grid.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:test_project/controllers/productController.dart';
import 'package:test_project/productWidget.dart';
class GridSelect extends StatelessWidget {
final _controller = Get.put(ProductController());
GridSelect({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
children: List.generate(_controller.addOnProducts.length, (index) => ProductWidget(index: index))
),
);
}
}
In your product controller class, remove the instance as it is not important. That is the only change here:
ProductController.dart
import 'package:get/get.dart';
import 'package:test_project/models/productModel.dart';
class ProductController extends GetxController {
RxList<CheckProduct> addOnProducts = <CheckProduct>[].obs;
#override
void onReady() {
super.onReady();
addOnProducts.add(CheckProduct(product: ProductModel('productOne', 20)));
addOnProducts.add(CheckProduct(product: ProductModel('productTwo', 25)));
addOnProducts.add(CheckProduct(product: ProductModel('productThree', 30)));
addOnProducts.add(CheckProduct(product: ProductModel('productFour', 40)));
}
}
class CheckProduct {
ProductModel product;
RxBool selected = false.obs;
CheckProduct({
required this.product,
});
}
Lastly, your productWidget class needs a required value index. So, the widget knows which index in gridview the user is clicking and use Obx() here in checkbox as you have an observable value selected here. Remember to always use Obx() when you have an obs value. This will update the widget whenever an obs value changes. Here, if you notice we are using Get.find() instead of Put as Get.put is already inside the scope so all you need to do is find the controller that you will use. You can find or put multiple controllers and update values as much as you want.
productWidget.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:test_project/controllers/productController.dart';
class ProductWidget extends StatelessWidget {
final ProductController _controller = Get.find();
final int index;
ProductWidget({Key? key, required this.index}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
margin: EdgeInsets.all(20),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 4,
left: 4,
child: Obx(()=>Checkbox(
value: _controller.addOnProducts[index].selected.value,
onChanged: (value) {
print("value of the value is : $value");
print("value of product selected before is: " +
_controller.addOnProducts[index].selected.toString());
_controller.addOnProducts[index].selected.value = value!;
print("value of product selected after is: " +
_controller.addOnProducts[index].selected.toString());
},
)),
)
],
),
);
}
}
Go through GetX documentation for proper use of GetX. Even though I have 2 apps in Playstore with GetX, I still go through documentation from time to time. They have a clear documentation on how to manage state.
In ProductWidget adding an additional Obx() solved my problem
class ProductWidget extends StatelessWidget {
final CheckProduct product;
const ProductWidget({Key? key, required this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
margin: EdgeInsets.all(10),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 4,
left: 4,
// Even the child needs Obx() ; The parent's Obx() is not reflected here
child: Obx(()=>(Checkbox(
value: product.selected,
onChanged: (value) {
print("value of the value is : $value");
print("value of product selected before is: " +
product.selected.toString());
product.selected = value!;
print("value of product selected after is: " +
product.selected.toString());
},
),))
),
],
));
}

Flutter change state from related widget class

Lets assume a class "SpecialButton" and its State-Class "SpecialButtonState"
class SpecialButton extends StatefulWidget {
bool active = false;
SpecialButton({Key key}) : super(key: key);
#override
SpecialButtonState createState() => SpecialButtonState();
}
class SpecialButtonState extends State<SpecialButton> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
decoration:
BoxDecoration(color: this.widget.active ? COLOR_1 : COLOR_2),
child: null);
}
}
In the parent widget, I manage a couple of these buttons. Therefore, I want to assign a state to them. The solution I tried was to introduce a flag "active" in the SpecialButton class which I can easily set to either true or false from the parent widget. I can then use this in the build function of the state class to colorize the button. Unfortunately, this does not work completely as it does not update the button immediately (it needs some kind of state update e.g. by hovering over the element).
My second idea was to introduce this flag as a propper state of the SpecialButtonState class
class SpecialButton extends StatefulWidget {
SpecialButton({Key key}) : super(key: key);
#override
SpecialButtonState createState() => SpecialButtonState();
}
class SpecialButtonState extends State<SpecialButton> {
bool active;
#override
void initState() {
super.initState();
this.active = false;
}
activate() {
this.setState(() {
active = true;
});
}
deactivate() {
this.setState(() {
active = false;
});
}
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: this.active ? COLOR_1 : COLOR_2),
child: null);
}
}
As far as I understood, this would be the correct way to work with flutter but it seems that I can't access the functions "activate" or "deactivate" from either the SpecialButton Class or the Parent Class containing the widget.
So my question is: How can I (directly or indirectly through functions) modify a State from the corresponding StatefulWidget Class or the Parent Widget containing it?
There are already some similar questions about this on here on Stack Overflow where I could find hints both to use or not to use global keys for such behavior which i found misleading. Also, due to the rapid ongoing development of flutter, they are probably outdated so I ask this (similar) question again in relation to this exact use case.
EDIT: I forgot to mention that it is crucial that this flag will be changed after creation therefore It will be changed multiple times during its livetime. This requires the widget to redraw.
It is not neсessary to use stateful widget for SpecialButton is you case. You can handle active flag with stateless widget and keys. Example code:
class SomeParent extends StatefulWidget {
const SomeParent({Key key}) : super(key: key);
#override
State<SomeParent> createState() => SomeParentState();
}
class SomeParentState extends State<SomeParent> {
bool _button1IsActive = false;
bool _button2IsActive = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SpecialButton(
key: UniqueKey(),
active: _button1IsActive,
),
SizedBox(height: 8),
SpecialButton(
key: UniqueKey(),
active: _button2IsActive,
),
SizedBox(height: 16),
TextButton(
child: Text('Toggle button 1'),
onPressed: () {
setState(() {
_button1IsActive = !_button1IsActive;
});
},
),
SizedBox(height: 8),
TextButton(
child: Text('Toggle button 2'),
onPressed: () {
setState(() {
_button2IsActive = !_button2IsActive;
});
},
),
],
),
);
}
}
class SpecialButton extends StatelessWidget {
final bool active;
const SpecialButton({Key key, this.active = false}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 40,
width: 40,
decoration: BoxDecoration(color: active ? Colors.red : Colors.blue),
);
}
}
SomeParent is my fantasy, just for example. Don't know what your parent is.
Keys are significant here. They tell widget tree when specific widgets with the same type (such as SpecialButton) should be rebuild.
Please try this approach, it should work.
As nvoigt says, your buttons could even be stateless widget , but their parent should be statefull and you should provide them with the corresponding value. e.g.:
import 'package:flutter/material.dart';
class Parent extends StatefulWidget {
#override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
bool isEnabled = false;
#override
Widget build(BuildContext context) {
return Column(
children: [
StateLessButton1(isEnabled: isEnabled),
StateLessButton1(isEnabled: !isEnabled),
FloatingActionButton(onPressed: (){
setState(() {
isEnabled = !isEnabled;
});
})
],
);
}
}
Now it just depends on when you want to change that value. If you want to change it inside your buttons, I would recommend you to use a class with ChangeNotifier and a function inside it that changes the value. Otherwise I would recommend not to separate your tree into multiple files

How to get data out of a reusable StatefulWidget in Flutter/Dart?

I have made the following reusable widget in Flutter. It is used to show a dropdown list of items taken from Cloud Firestore, and when a user selects an option it should be passed to the variable answer.
However when I use my widget Survey Answer the dropdown items show as expected, but I am unable to pass the selected option out from onChanged out of my widget - print(widget.answer); shows the right item in the Dart Console, the item selected from the dropdown menu, but when I use this widget on a different page and try to print out the value of the answer variable I just get null returned.
Can someone shed some light on this please?
Reusable widget:
class SurveyAnswer extends StatefulWidget {
final String collection1;
final String document;
final String collection2;
var answer;
SurveyAnswer(
{Key key,
#required this.collection1,
#required this.document,
#required this.collection2,
#required this.answer})
: super(key: key);
#override
_SurveyAnswerState createState() => _SurveyAnswerState();
}
class _SurveyAnswerState extends State<SurveyAnswer> {
#override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection(widget.collection1)
.document(widget.document)
.collection(widget.collection2)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError)
return Center(child: Text("Error"));
else if (!snapshot.hasData)
return Center(child: Text("Loading..."));
else if (snapshot.data.documents.isEmpty)
return Center(child: Container(width: 0, height: 0));
else {
List<DropdownMenuItem> answerItems = [];
for (int i = 0; i < snapshot.data.documents.length; i++) {
DocumentSnapshot snap = snapshot.data.documents[i];
answerItems.add(
DropdownMenuItem(
child: Text(
snap.documentID,
style: TextStyle(color: Color(0xff303841)),
),
value: "${snap.documentID}",
),
);
}
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FormBuilderDropdown(
attribute: 'attribute',
hint: Text('Please choose an option'),
validators: [FormBuilderValidators.required()],
items: answerItems,
onChanged: (answerValue) {
setState(() {
widget.answer = answerValue;
print(widget.answer);
});
},
),
],
);
}
});
}
}
How the above is used in my app:
SurveyAnswer(
collection1: 'MySurveys',
document: 'FirestoreTestSurvey',
collection2: 'a01',
answer: 'ans01'),
In this example, I want to create a variable ans01 which returns the value selected in the dropdown menu.
The reason I have made a reusable widget for this is that each page has a lot of survey items and otherwise my code would be a mess.
Thank you.
you should write callback function
class SurveyAnswer extends StatefulWidget {
final String collection1;
final String document;
final String collection2;
final Function(String) onAnswer;
SurveyAnswer(
{Key key,
#required this.collection1,
#required this.document,
#required this.collection2,
#required this.onAnswer})
: super(key: key);
#override
_SurveyAnswerState createState() => _SurveyAnswerState();
}
Change your on change method
onChanged: (answerValue) {
widget.onAnswer(answerValue)
}
and use like this
SurveyAnswer(
collection1: 'MySurveys',
document: 'FirestoreTestSurvey',
collection2: 'a01',
onAnswer: (ans) {
print(ans)
})

Passing data from one widget to another

I have a list of choice widget and want to pass the selected choice to another widget.
Here is the list of choice widget
class ChoiceChipWidget extends StatefulWidget {
final List<String> reportList;
final Function(String item) onChoiceSelected;
ChoiceChipWidget(this.reportList, this.onChoiceSelected);
#override
_ChoiceChipWidgetState createState() => new _ChoiceChipWidgetState();
}
class _ChoiceChipWidgetState extends State<ChoiceChipWidget> {
String selectedChoice = "";
_buildChoiceList() {
List<Widget> choices = List();
widget.reportList.forEach((item) {
choices.add(Container(
child: ChoiceChip(
label: Text(item),
selected: selectedChoice == item,
onSelected: (selected) {
setState(() {
selectedChoice = item;
widget.onChoiceSelected(item);
print(selectedChoice); //DATA THAT NEEDS TO BE PASSED
});
},
),
));
});
return choices;
}
#override
Widget build(BuildContext context) {
return Wrap(
children: _buildChoiceList(),
);
}
}
I need to pass it to this widget
class AddCashPage extends StatefulWidget {
#override
_AddCashPageState createState() => _AddCashPageState();
}
class _AddCashPageState extends State<AddCashPage> {
void createTodo() async {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
String repetition = //DATA NEEDS TO GO HERE;
final addCash = AddCash(repetition);
setState(() {
id = addCash.id;
});
}
}
#override
Widget build(BuildContext context) {
return Container(
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
ChoiceChipWidget(chipList, (item) {
selectedItem = item;
}),
],
),
RaisedButton(
child: Text("Update Cash Flow"),
onPressed: createTodo,
),
],
),
),
);
}
}
I tried making a constructor inside AddCashPage
like this
class AddCashPage extends StatefulWidget {
final ChoiceChipWidget choiceChipWidget;
AddCashPage({Key key, #required this.choiceChipWidget}) : super(key: key);
#override
_AddCashPageState createState() => _AddCashPageState();
}
I think you just missed to call setState() in here:
ChoiceChipWidget(chipList, (item) {
selectedItem = item;
}),
Like this:
ChoiceChipWidget(chipList, (item) {
setState(() => selectedItem = item);
}),
Then you could do this:
AddCash(selectedItem)
Make sure to declare the selectedItem variable inside _AddCashPageState, I don't see it on your code.
Your choice widget passes the data to the AddCashPage via the constructor you created, but you're missing something. You need to pass the data that AddCashPage has to its state (_AddCashState) so that you can use it there. Basically, you need to create one more constructor.
class AddCashPage extends StatefulWidget {
final ChoiceChipWidget choiceChipWidget;
AddCashPage({Key key, #required this.choiceChipWidget}) : super(key: key);
#override
_AddCashPageState createState() => _AddCashPageState(choiceChipWidget: choiceChipWidget);
}
And in _AddCashPageState:
class _AddCashPageState extends State<AddCashPage> {
final choiceChipWidget;
_AddCashPageState({Key key, #required this.choiceChipWidget});
}
To use your passed data inside _AddCashPageState class you can use widget property of the corresponding state of the related Stateful class.
For Ex : To use choice chip widget in your class you can use it like widget.ChoiceChipWidget
Any properties/methods provided in AddCashPage class can be accessed in its State class _AddCashPageState() using widget.ChoiceChipWidget property;
You can use this widget property inside methods only like, initState(), build(), dispose() etc.