I have a simple app, it has named route in an appbar to a stateful widget. Currently, whenever I navigate away from the stateful widget and back again, the stateful widget loses its state (in this case my counter goes back to 0). I'd like the stateful widget to keep its state, but I'm not sure what I'm doing wrong. Do I need to explicitly keep state around? How? Should I be using didUpdateWidget to transfer state? Or something else?
This is my main.dart:
import 'dart:async';
import 'package:flutter/material.dart';
import './pages/home_page.dart';
import './pages/counter_page.dart';
void main()
{
CounterPage counterPage = new CounterPage();
return runApp(new MaterialApp(
home: new HomePage(),
theme: new ThemeData.dark(),
routes: <String, WidgetBuilder> {
"main": (BuildContext context) => new HomePage(),
'counter_page': (BuildContext context) {
return counterPage;
}
},
));
}
This is the counter_page.dart
import 'dart:async';
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
static String route = "counter_page";
CounterPage();
#override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter;
#override
void initState() {
super.initState();
_counter = 0;
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Count"),
),
body: new Text("$_counter"),
floatingActionButton: new FloatingActionButton(
onPressed: () => setState(() {_counter += 1;}),
tooltip: 'Count',
child: new Icon(Icons.refresh),
),
);
}
}
There are multiple ways to handle state management in Flutter, but one way of doing this is by using the provider package. With this, even if the Screen gets rebuilt multiple times, state management won't be affected.
Related
I've been working with Flutter recently, and I saw that there was many ways to deal with state management.
Following the recommendations there, I've been using Provider to deal with the state of my app.
I can update a part of my state from one of the widgets in my UI. To do that, I can call a method of the provider that's above the current widget in the context. No problems with this.
But I want the update of my state to be made from an overlay.
The issue is: When I'm inserting an OverlayEntry with Overlay.of(context)?.insert(), it inserts the overlayEntry to the closest Overlay, which is in general the root of the app, which is above the ChangeProvider. As a result, I get an exception saying I can't find the Provider from the OverlayEntry.
Here is a replication code I've been writting:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ChangeNotifierProvider(
create: (context) => NumberModel(), // All widgets that will be lower in the widget tree will have access to NumberModel
child: NumberDisplayer()
),
);
}
}
// Simple ChangeNotifier. We have a number that we can increment.
class NumberModel extends ChangeNotifier {
int _number = 10;
int get number => _number;
void add_one() {
_number = number + 1;
notifyListeners();
}
}
// This class displays a number, and a button.
class NumberDisplayer extends StatelessWidget {
NumberDisplayer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var overlayEntry = OverlayEntry(builder: (context) =>
Positioned(
top: 100,
left: 50,
child: FloatingActionButton(onPressed: (){
// Throws "Error: Could not find the correct Provider<NumberModel> above this _OverlayEntryWidget Widget"
Provider.of<NumberModel>(context, listen: false).add_one();
})));
return Consumer<NumberModel>(
builder: (context, numberModel, child) {
return Column(
children: [
Text('Number: ${numberModel.number}'),
FloatingActionButton(onPressed: () {
Overlay.of(context)?.insert(overlayEntry);
})
],
);
},
);
}
}
I would like to find a way to update the information in my provider from the overlay, but I'm not sure how to approach this problem.
Thanks for your help everyone !
I'm a beginner in flutter and I'm looking for a simple way to refresh a network image.
In a basic code like this, what would be the simplest method of getting flutter to fetch and draw this image again? In my code the image is a snapshot from a security camera, so it changes every time it is fetched, but always has the same url. I get a new picture every time I start the app, but I would like the image refreshed when I press the image itself.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
var title = 'Web Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Image.network('https://picsum.photos/250?image=9'),
),
);
}
}
Extend Your Class With Stateful Widget then:
body: Inkwell(
onTap: ()=> setState(){};
Image.network('https://picsum.photos/250?image=9'),
),
this will refresh the page. Or If you dont want to tap then :
#override
void initState() {
super.initState();
setState(){
print('refreshing');
}
}
If you need forced picture refresh - try such code:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
var title = 'Web Images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ForcePicRefresh(),
));
}
}
class ForcePicRefresh extends StatefulWidget {
#override
_ForcePicRefreshState createState() => _ForcePicRefreshState();
}
class _ForcePicRefreshState extends State<ForcePicRefresh> {
String url =
'https://www.booths.co.uk/wp-content/uploads/British-Flower-1x1-2-660x371.jpg';
Widget _pic;
#override
void initState() {
_pic = Image.network(url);
super.initState();
}
_updateImgWidget() async {
setState(() {
_pic = CircularProgressIndicator();
});
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
.buffer
.asUint8List();
setState(() {
_pic = Image.memory(bytes);
});
}
#override
Widget build(BuildContext context) {
return InkWell(
child: _pic,
onTap: () {
_updateImgWidget();
},
);
}
}
Another tricky solution is to add a dummy argument which changes every time, then the image will be treat as different image source and will refresh image every time when you access it. For example add t=currentTimestamp, but you don't need handle this argument in the web server.
ex: Image.network('https://picsum.photos/250?image=9?t=${DateTime.now().millisecond}'
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
//Using Bloc
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: bloc.darkThemeEnabled,
initialData: false,
builder: (context, snapshot) => MaterialApp(
theme: snapshot.data ? ThemeData.dark() : ThemeData.light(),
home: HomePage(snapshot.data)),
);
}
}
class HomePage extends StatelessWidget {
final bool darkThemeEnabled;
HomePage(this.darkThemeEnabled);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dynamic Theme"),
),
body: Center(
child: Text("Hello World"),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
ListTile(
title: Text("Dark Theme"),
trailing: Switch(
value: darkThemeEnabled,
onChanged: bloc.changeTheme,
),
)
],
),
),
);
}
}
class Bloc {
final _themeController = StreamController<bool>();
get changeTheme => _themeController.sink.add;
get darkThemeEnabled => _themeController.stream;
}
final bloc = Bloc();
1.A warning says to Close instances of dart.core.sink
2.Why dart.core.sink is used in flutter?
3.How can I solve this error
4.Its error documentation redirects me to this website link
5.I don't know how to use these methods in flutter please guide me
dart.core.sink is an interface that is implemented by Stream.
The warning is showing, because the dart compiler wants you to .close() your instance of a Stream. In this case that is your final _themeController = StreamController<bool>().
If you want to fix the warning, add
void dispose() {
_themeController.close();
}
to your Bloc class.
Just adding the method is not doing much, since it's not called. So you should change your main() method to call bloc.dispose() after runApp(MyApp()).
That error occur when missing close StreamController.
Simple way to fix:
Create abstract class:
abstract class Bloc {
void dispose();
}
Your bloc class implements Bloc, now you can close StreamController in dispose:
class ColorBloc implements Bloc {
// streams of Color
StreamController streamListController = StreamController<Color>.broadcast();
// sink
Sink get colorSink => streamListController.sink;
// stream
Stream<Color> get colorStream => streamListController.stream;
// function to change the color
changeColor() {
colorSink.add(getRandomColor());
}
// Random Colour generator
Color getRandomColor() {
Random _random = Random();
return Color.fromARGB(
_random.nextInt(256),
_random.nextInt(256),
_random.nextInt(256),
_random.nextInt(256),
);
}
// close Stream
#override
void dispose() {
streamListController.close();
}
}
I need to call from another widget the App class. How can I get a reference to the app class? I tried something like this:
static App myApp = this;
but a "this" is not defined, nor a "self".
Is there a way to make a "App" variable or put the app object into some kind of global variable?
EDIT:
To be more clear: I use a tabbed navigation style app and want to display a fullscreen spinning indicator (ModalProgressHud) that something is loading from the backend.
Now when I add the spinner code to some of the screens, the tabs will still be visible and clickable when the spinner is shown. Hence the idea to move the spinner code to the main app file, surrounding the tabbar creation.
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My cool app',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new App(),
);
}
}
Now in the App class, I initiate the tabs like this and wrap them in the build function inside the spinning indicators call ("ModalProgressHud"):
body: ModalProgressHUD(child: buildTabs(context), inAsyncCall: _saving, color: Colors.grey, opacity: 0.5),
import 'package:modal_progress_hud/modal_progress_hud.dart';
class App extends StatefulWidget {
#override
State<StatefulWidget> createState() => AppState();
}
class AppState extends State<App> {
bool _saving = false;
TabItem currentTab = TabItem.Dashboard;
Map<TabItem, GlobalKey<NavigatorState>> navigatorKeys = {
TabItem.Dashboard: GlobalKey<NavigatorState>(),
TabItem.Family: GlobalKey<NavigatorState>(),
TabItem.Groups: GlobalKey<NavigatorState>(),
TabItem.ShoppingList: GlobalKey<NavigatorState>(),
TabItem.Me: GlobalKey<NavigatorState>(),
};
AppState() {
_initManagers();
}
void _initManagers() {
new BackendManager();
new ShoppingListManager();
new UserManager();
}
void _selectTab(TabItem tabItem) {
UserManager user = new UserManager();
if (user.userIsLoggedIn()) {
// only if user is logged-in we allow to switch bottom navi tabs
setState(() {
currentTab = tabItem;
});
}
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async =>
!await navigatorKeys[currentTab].currentState.maybePop(),
child: Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,
// HERE THE WRAP OF THE MAIN TABS IN THE HUD WIDGET
body: ModalProgressHUD(child: buildTabs(context), inAsyncCall: _saving, color: Colors.grey, opacity: 0.5),
bottomNavigationBar: BottomNavigation(
currentTab: currentTab,
onSelectTab: _selectTab,
),
),
);
}
Widget buildTabs(BuildContext context) {
return Stack(children: <Widget>[
_buildOffstageNavigator(TabItem.Dashboard),
_buildOffstageNavigator(TabItem.Search),
_buildOffstageNavigator(TabItem.Shop),
_buildOffstageNavigator(TabItem.ShoppingList),
_buildOffstageNavigator(TabItem.Me),
]);
}
Widget _buildOffstageNavigator(TabItem tabItem) {
return Offstage(
offstage: currentTab != tabItem,
child: TabNavigator(
navigatorKey: navigatorKeys[tabItem],
tabItem: tabItem,
),
);
}
void _submit() {
setState(() {
_saving = true;
});
//Simulate a service call
print('>>>>>> submitting to backend...');
new Future.delayed(new Duration(seconds: 4), () {
setState(() {
_saving = false;
});
});
}
}
The ModalProgressHud is now in the app class. My problem is now, I want to set / call the ModalProgressHud from any other widget to show the fullscreen overlay spinning indicator.
Hence I was thinking if a global static variable works (and how do I set this?) or if there is any other way to call the submit() function inside the App class.
First, I wonder why you need to pass the reference of the app class?
If you want to pass the app instance or reference it to the child widget, you can create a widget class with a constructor accepting the App object.
NOTE: If you need this because you have to pass on some data, you might consider using provider or inheritedWidget + BloC.
This is just a rough example, if you can provide more details that might actually help, please do.
AnotherWidget.dart
class AnotherWidget extends StatelessWidget {
final MyApp myApp;
const AnotherWidget({Key key, this.myApp}) : super(key: key);
// Do whatever you want with myApp instance
}
MyApp.dart
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'AnotherWidgetDemo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnotherWidget(myApp: this),
);
}
}
Hope this helps.
Try something like they do in Flutter for Web, import the file and use as, then you have the reference for calling a method
import 'package:hello_web/main.dart' as app;
main() async {
app.main();
}
I created this code, what i want to happen is when i press on the button i want the piechart to re-render with the new values (which should be old values but the food value increased by 1)
I am using a piechart from pie_chart: 0.8.0 package.
Deposit is nothing but a pojo (String category and int deposit)
the bloc.dart contains a global instance of the bloc, a getter for the stream and initialization of a stream of type
Here's my code:
import 'package:flutter/material.dart';
import 'package:pie_chart/pie_chart.dart';
import 'bloc.dart';
import 'Deposit.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'bloc Chart',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
Map<String, double> datamap = new Map();
#override
Widget build(BuildContext context) {
datamap.putIfAbsent("Food", () => 5);
datamap.putIfAbsent("transportation", () => 3);
return Scaffold(
appBar: AppBar(
title: Text("PieChart using blocs"),
),
body: Column(
children: <Widget>[
StreamBuilder<Deposit>(
stream: bloc.data, //A stream of Deposit data
builder: (context, snapshot) {
addDeposit(Deposit("Food", 1), datamap);
debugPrint("Value of food in map is: ${datamap["Food"]}");
return PieChart(dataMap: datamap);
}),
SizedBox.fromSize(
size: Size(20, 10),
),
RaisedButton(
onPressed: () {
bloc.add(Deposit("Food", 1)); //returns the stream.add
},
child: Icon(Icons.add),
),
],
),
);
}
void addDeposit(Deposit dep, Map<String, double> map) {
if (map.containsKey(dep.category)) {
map.update(dep.category, (value) => value + dep.price);
} else
map.putIfAbsent(dep.category, () => dep.price);
}
}
I think your problem is that the stream doesn't trigger new events. You don't have to close the stream to rebuild. I can't see anywhere in your code where you are triggering new events for the stream. Check below code to see a simple way how you can update a StatelessWidget using a StreamBuilder.
class CustomWidgetWithStream extends StatelessWidget {
final CustomBlock block = CustomBlock();
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
StreamBuilder(
stream: block.stream,
builder: (context, stream) {
return Text("${stream.data.toString()}");
}),
RaisedButton(
onPressed: () {
block.incrementNumber();
},
child: Text("Increment"),
)
],
);
}
}
class CustomBlock {
num counter = 10;
final StreamController<num> _controller = StreamController();
Stream<num> get stream => _controller.stream;
CustomBlock() {
_controller.onListen = () {
_controller.add(counter); // triggered when the first subscriber is added
};
}
void incrementNumber() {
counter += 1;
_controller.add(counter); // ADD NEW EVENT TO THE STREAM
}
dispose() {
_controller.close();
}
}
Although this is a working code snippet, I would strongly suggest to change your widget from StatelessWidget to StatefulWidget, for two reasons:
* if you go "by the book", if a widget changes the content by itself, then it's not a StatelessWidget, a stateless widget only displays data that is given to it. In your case, the widget is handling the tap and then decides what to do next and how to update itself.
* if you are using streams, in a stateful widget you can safely close the stream, as you can see in the above code, there's no safe way to close the stream. If you don't close the stream, there might be unwanted behaviour or even crashes.
This is my bloc file
import 'package:rxdart/rxdart.dart';
import 'package:testing/Deposit.dart';
class Bloc{
final _data = new BehaviorSubject<Deposit>();
Stream<Deposit> get data => _data.stream;
Function(Deposit) get add => _data.sink.add;
void dispose(){
_data.close();
}
}
Bloc bloc = new Bloc();