I have a "WidgetBackGround" statefullwidget that return an animated background for my app,
I use it like this :
Scaffold( resizeToAvoidBottomInset: false, body: WidgetBackGround( child: Container(),),)
The problem is when I use navigator to change screen and reuse WidgetBackGround an other instance is created and the animation is not a the same state that previous screen.
I want to have the same animated background on all my app, is it possible to instance it one time and then just reuse it ?
WidgetBackGround.dart look like this:
final Widget child;
WidgetBackGround({this.child = const SizedBox.expand()});
#override
_WidgetBackGroundState createState() => _WidgetBackGroundState();
}
class _WidgetBackGroundState extends State<WidgetBackGround> {
double iter = 0.0;
#override
void initState() {
Future.delayed(Duration(seconds: 1)).then((value) async {
for (int i = 0; i < 2000000; i++) {
setState(() {
iter = iter + 0.000001;
});
await Future.delayed(Duration(milliseconds: 50));
}
});
super.initState();
}
#override
Widget build(BuildContext context) {
return CustomPaint(painter: SpaceBackGround(iter), child: widget.child);
}
}
this is not a solution, but maybe a valid workaround:
try making the iter a static variable,
this of course won't preserve the state of WidgetBackGround but will let the animation continue from its last value in the previous screen
A valid solution (not sure if it's the best out there):
is to use some dependency injection tool (for example get_it) and provide your WidgetBackGround object as a singleton for every scaffold in your app
Related
I'm trying to use the hive db to store simple objects in an app that has 3 main pages, selected with a nav bar in the following form (following closely the example from the flutter docs).
/// determine body widget ie page to be rendered
int _pageIndex = 0;
/// list of body widgets
static const List<Widget> _pageOption = [
KeyList(), //index 0
PersonalKey(), //index 1
Crypt(), //index 2
];
/// [index] tells body of scaffold what widget to render
void _changePage(int index) {
setState(() {
_pageIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: const TextStyle(color: cyan),
),
),
body: Center(
child: _pageOption.elementAt(_pageIndex),
),
I'm not sure how to get the hive box to open / work with each page. for instance a Box would need to used in the KeyList() page. I tried passing the box through state but this is warned against and didn't work.
I tried varies combinations of an async main function and an overriden innitState function in _KeyListState() and now I'm not getting any widgets to render.
main function (from main.dart)
void main() async {
await Hive.initFlutter();
await Hive.openBox<ContactKey>('contacts');
Hive.registerAdapter(ContactKeyAdapter());
runApp(const MyApp());
}
reference from key_list.dart
class _KeyListState extends State<KeyList> {
late final Box contactBox;
#override
void initState() {
super.initState();
contactBox = Hive.box("contacts");
// makeKeyList();
}
#override
void dispose() {
Hive.close();
super.dispose();
}
final List<ContactKey> _keys = []; // = [
// ContactKey(contactName: "cade", publicKey: "123")
// ];
void addKey(String name, String key) async {
ContactKey newContact = ContactKey(contactName: name, publicKey: key);
setState(() {
contactBox.add(newContact);
makeKeyList();
});
}
void makeKeyList() {
if (contactBox.isNotEmpty) {
for (var i = 0; i < contactBox.length; i++) {
_keys.add(contactBox.getAt(i));
}
}
}
#override
Widget build(BuildContext context) {
return Stack(
...
I'm not getting any errors or warnings but when the app is running I get the error "each child must be laid out only once" A google search on this error made it seem like a flutter bug, but if I remove the Hive code my app renders again.
I'm pretty lost right now and if anyone has any tips or sample apps that use a nav bar with hive they'd be greatly appreciated!
Thanks
I'm making an app that pulls data from an API and displays it in a view (MVC style).
I need to figure out how to force my view widget to redraw itself. Right now I tried with ValueKeys and ObjectKeys but to no avail.
There's lots and lots of code so I am going to use snippets as much as possible to keep it clear. (If you need to see more code feel free to ask)
Here's my view widget:
class view extends StatefulWidget{
view({
Key key,
this.count = 0,
}) : super(key: key);
int count;
String _action='';
var _actionParams='';
var _data;
Function(String) callback;
void setAction(String newAction){
_action = newAction;
}
void setActionParams(String params){
_actionParams = jsonDecode(params);
}
void setData(String data){
_data = jsonDecode(data);
}
void incrementCounter(){
count++;
}
#override
_viewState createState() => _viewState();
}
class _viewState extends State<view>{
Object redrawObject = Object();
#override
Widget build(BuildContext context) {
/*
switch(widget._action){
case '':
break;
default:
return null;
}
*/
return Text("Counter: "+widget.count.toString());
}
#override
void initState(){
this.redrawObject = widget.key;
super.initState();
}
}
You can see in the commented code that I am planning to change the way the view builds itself in function of the data that gets passed to it.
What I have tried so far is to pass a ValueKey/ObjectKey to the view from main.dart in a constructor and then changing the object at runtime. Unfortunately that did not work.
At the top of my main.dart(accessible from anywhere within main) I have this:
Object redraw = Object();
final dataView = new view(key: ObjectKey(redraw));
Then in the body of the homepage I have the view and a floating button right under.
If I press the button it should increment the counter inside the view and force it to redraw. Here's the code I have tried so far:
body: Center(
child: dataView
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.badge),
onPressed: (){
dataView.incrementCounter();
redraw = new Object();
},
),
From what I understand, if the object that was used as a key gets changed, then flutter should rebuild the state for the widget. So I'm setting my object to a new object but it's not working.
I also tried something like this:
onPressed: (){
setState((){
dataView.incrementCounter();
redraw = new Object();
});
},
Eventually I'd like to use a navigator in conjunction with my view widget (so that we have a back button) but I don't know if this is possible.
It feels a bit like I'm fighting with the framework. Is there a different paradigm I should use (like pages?) or is it possible for me to do it this way?
How do I force my view widget to get redrawn?
Using Göktuğ Vatandaş' answer and GlobalKeys I was able to figure it out.
I made a reDraw() function inside the state and then I called it from my main using a GlobalKey.
Note: Wrapping in a container and using a key for the container is not necessary. Calling setState() is enough to force a redraw.
Here's the new view widget:
import 'dart:convert';
import 'package:flutter/cupertino.dart';
GlobalKey<_viewState> viewKey = GlobalKey();
class view extends StatefulWidget{
view({
Key key,
this.count = 0,
}) : super(key: key);
int count;
String _action='';
var _actionParams='';
var _data;
Function(String) callback;
void setAction(String newAction){
_action = newAction;
}
void setActionParams(String params){
_actionParams = jsonDecode(params);
}
void setData(String data){
_data = jsonDecode(data);
}
void incrementCounter(){
count++;
}
#override
_viewState createState() => _viewState();
}
class _viewState extends State<view>{
#override
Widget build(BuildContext context) {
/*
switch(widget._action){
case '':
break;
default:
return null;
}
*/
return Text("Counter: "+widget.count.toString());
}
#override
void initState(){
super.initState();
}
void reDraw(){
setState((){});
}
}
Here's where I declare the view widget in my main:
final dataView = new view(key: viewKey);
Here's where I call the reDraw() function:
floatingActionButton: FloatingActionButton(
child: Icon(Icons.badge),
onPressed: (){
dataView.incrementCounter();
viewKey.currentState.reDraw();
},
),
Thanks Göktuğ Vatandaş!
You can check flutter_phoenix's logic for redraw effect. I think its very useful or you can just use package itself. Basically it does what you trying to achive.
It creates a unique key in state.
Key _key = UniqueKey();
Injects it to a container.
#override
Widget build(BuildContext context) {
return Container(
key: _key,
child: widget.child,
);
}
And when you call rebirth it just refresh key and that causes view to rebuild.
void restartApp() {
setState(() {
_key = UniqueKey();
});
}
I have a widget with a lot of contents like image, text and more, which make it heavy widget in flutter app, But when the app is navigated to the widget having the complex widget the app faces the jank since the widget is too large to load at an instant,
I want to show simple lite loading widget until the original widget is loaded thus removing the jank from the app and enable lazy loading of the widget,
How to achieve this in flutter?
EDIT:-
To make it clear, I am not loading any data from the Internet, and this is not causing the delay. For Loading the data from Internet we have FutureBuilder. Here my widget is itself heavy such that it takes some time to load.
How to display loading Widget while the main widget is being loaded.
First you have to create a variable to keep the state
bool isLoading = true; //this can be declared outside the class
then you can return the loading widget or any other widget according to this variable
return isLoading ?
CircularProgressIndicator() //loading widget goes here
: Scaffold() //otherwidget goes here
you can change between these two states using setState method
Once your data is loaded use the below code
setState(() {
isLoading = false;
});
Sample Code
class SampleClass extends StatefulWidget {
SampleClass({Key key}) : super(key: key);
#override
_SampleClassState createState() => _SampleClassState();
}
bool isLoading = true; // variable to check state
class _SampleClassState extends State<SampleClass> {
loadData() {
//somecode to load data
setState(() {
isLoading = false;//setting state to false after data loaded
});
}
#override
void initState() {
loadData(); //call load data on start
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
child: isLoading ? //check loadind status
CircularProgressIndicator() //if true
:Container(), //if false
);
}
}
This is a perfect place to use a FutureBuilder.
Widget loadingWidget = ...;
Future<Widget> buildHeavyWidget() async {
// build and return heavy widget
}
FutureBuilder(
future: buildHeavyWidget(),
builder: (context, snapshot) {
if(snapshot.hasData) {
// after the future is completed
// the heavy widget is availabe as snapshot.data
return snapshot.data;
}
return loadingWidget;
},
)
First define a bool value.
bool isLoading = false;
In your function.
yourfunction(){
setState(){
isLoading = true;
}
setState(){
isLoading = false;
}
}
In your widget.
isLoading?CircularProgressIndicator():Widget()
Please check out this 36 seconds video for more clarity, cause it was getting too verbose explaning things : https://www.youtube.com/watch?v=W6WdQuLjrCs
My best guess
It's due to the provider.
App structure ->
Outer Page -> NoteList Page
The Outer Page code :
class OuterPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return OuterPageState();
}
}
class OuterPageState extends State<OuterPage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _selectedTab = 0;
var noteList;
final _pageOptions = [
NoteList(),
AnotherPageScreen(),
];
#override
Widget build(BuildContext context) {
var noteProvider = Provider.of<NotesProvider>(context, listen: false);
var customFabButton;
if (_selectedTab == 0) {
customFabButton = FloatingActionButton(
// Password section
onPressed: () {
navigateToDetail(context, Note('', '', 2), 'Add Note');
},
child: Icon(Icons.add),
);
~~~ SNIP ~~~
The Notes Tab aka NoteList page code :
class NoteList extends StatefulWidget {
NoteList();
#override
NoteListState createState() => NoteListState();
}
class NoteListState extends State<NoteList> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
List<Note> noteList;
int count = 0;
#override
Widget build(BuildContext context) {
Provider.of<NotesProvider>(context).getNotes();
return Scaffold(
key: _scaffoldKey,
body: Provider.of<NotesProvider>(context).count > 0
? NoteListScreen(_scaffoldKey)
: CircularProgressIndicator());
}
}
For full code : check here : https://github.com/LuD1161/notes_app/tree/reusable_components
Update 1 - Possible solution is FutureBuilder
I know that there's a possible solution with FutureBuilder but I think even Provider is apt for this use case.
Moreover is it an anti-pattern here ?
Also, please don't suggest another package for the same thing, if possible try limiting the solution to Provider or base libraries.
Update 2 - Not possible with FutureBuilder
FutureBuilder can't be used here because there's a delete button in the list tile and hence when the note gets deleted the note list won't get updated.
The issue is coming because of the getNotes function you are calling from build method. You are calling notifyListeners from that function. It again re-builds the widget and calls the build method again and this cycle continues.
You either need to set false to the listen property of provider, but it will break your functionality. To fix this, you have to move the getNotes call from build function to initState like following:
#override
void initState() {
super.initState();
postInit(() {
Provider.of<NotesProvider>(context).getNotes();
});
}
Implement postInit (Reference: Flutter Issue 29515):
extension StateExtension<T extends StatefulWidget> on State<T> {
Stream waitForStateLoading() async* {
while (!mounted) {
yield false;
}
yield true;
}
Future<void> postInit(VoidCallback action) async {
await for (var isLoaded in waitForStateLoading()) {}
action();
}
}
Note: Instead of writing the postInit code, you can also use after_init package for same purpose.
Several other posts discussing similar kind of issues:
How to correctly fetch APIs using Provider in Flutter
Using provider in fetching data onLoad
I am having a problem where my stream builder is only firing once.
I am trying to configure my bottomNavigationBar to be of a different colour based on the theme selected by the user.
To do this, I have a page whereby the user can decide whether to use the light theme or dark theme. This is saved into the device while shared preferences and then using async, i will stream the current value into my bottomNavigationBar.
The problem occurs when i use a stream builder to create two if statement. Stating that if the value returned from the stream is 0, i will show a "light mode" bottom navigation bar. Else if its 1, i will show a dark theme.
All is well when i run the program for the first time. However upon navigation into the settings page and changing the user preference, the stream builder will not load again. Here are some snapshots of my code
I have tried removing the dispose method whereby the stream will close. However that didn't solve the problem.
The Stream Builder
class mainPagev2 extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _mainPageV2();
}
}
class _mainPageV2 extends State<mainPagev2>
with SingleTickerProviderStateMixin {
// TabController _tabController;
StreamController<int> streamController = new StreamController.broadcast();
#override
void initState() {
super.initState();
// _tabController = TabController(vsync: this, length: _pageList.length);
Stream<int> stream = new Stream.fromFuture(readCurrentTheme());
streamController.addStream(stream);
}
#override
void dispose() {
// _tabController.dispose();
super.dispose();
}
String currentColor = "#ab3334";
#override
Widget build(BuildContext context) {
// TODO: implement build
return StreamBuilder(
stream: streamController.stream,
builder: (context, asyncSnapshot) {
print(asyncSnapshot.data.toString() + "WHssssAT IS THIS");
if (asyncSnapshot.hasData) {
print(asyncSnapshot.error);
if (asyncSnapshot.data == 0) {
//Return light themed Container
currentColor = "#ffffff";
return ThemeContainer(color: currentColor );
} else {
currentColor = "#101424";
//Return dark themed Container
return ThemeContainer(color: currentColor );
}
} else {
//return dark themed
return ThemeContainer(color:currentColor);
}
},
);
//
}
}
Async Code to retrieve the value stored
Future<int> readCurrentTheme() async {
final prefs = await SharedPreferences.getInstance();
final key = 'themeMode';
final value = prefs.getInt(key) ?? 0;
print('read: $value LOOK AT THISSS');
return value;
}
It is expected that the stream builder will fire whenever the value stored is changed!
I don't see in your code a way to read data from SharedPreferences when the value stored is changed. You are effectively reading it once, so the StreamBuilder is only firering once. That makes sense.
To be able to do what you want, you have to use something to tell you widget that a state has changed elsewhere in the application. There a multiple ways to achieve this and I won't make the choice for you as it would be opinion based, so you can check thing like BloC, Provider, ScopedModel, InheritedWidget