Sample code to test
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
StreamController controller;
List imgs = [
'https://images.unsplash.com/photo-1519336367661-eba9c1dfa5e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
'https://images.unsplash.com/photo-1594164070019-a3bd58576d55?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80',
'http://www.example.com'
];
int i = 0;
#override
void initState() {
super.initState();
controller = StreamController();
const oneSec = const Duration(seconds: 5);
new Timer.periodic(oneSec, (Timer t) {
print('value of i $i');
controller.sink.add(imgs[i]);
i++;
if (i > 2) {
i = 0;
}
});
}
#override
void dispose() {
controller.close();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder(
stream: controller.stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Image.network(
snapshot.data,
loadingBuilder: (context, child, loading) {
if (loading == null) return Center(child: child);
return Center(child: CircularProgressIndicator());
},
errorBuilder: (context, object, error) {
return Center(child: CircularProgressIndicator());
},
);
} else {
return Container();
}
},
),
);
}
}
The third image is not displayed. It is obvious. But after errorBuilder, The code does not show any other valid network images.
In github, i said it is a bug.
But the team said i must ask the question in stackoverflow
Is it a bug or am i making any mistake?
Please Avoid reading the below texts: *
It looks like your post is mostly code; please add some more details. - Error from stackoverflow. I have to now fill unwanted words without any meaning :-( Sometimes code is enough to describe the problem
I think you can add key: UniqueKey(), inside Image.network.
Flutter always try to reuse most of the widget to avoid rendering cost (maybe it keep the error status). Add UniqueKey to force rebuild.
Related
I have a Provider model such as
provider_model.dart:
import 'package:flutter/material.dart';
class ProviderModel extends ChangeNotifier {
final List<String> _myList = [];
List<String> get myList => [..._myList];
void addItem(String item) {
_myList.add(item);
notifyListeners();
}
}
Now, Flutter documentation shows us how to listen to websockets. Here I am using their example together with my ProviderModel():
main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import './provider_model.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ChangeNotifierProvider(
create: (BuildContext context) => ProviderModel(),
child: Scaffold(
body: MyHomePage(),
)),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _controller = TextEditingController();
final _channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.events'),
);
#override
Widget build(BuildContext context) {
return Consumer<ProviderModel>(
builder: (context, provider, _) {
return Column(children: [
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
suffixIcon: IconButton(
icon: Icon(
Icons.send,
),
onPressed: _sendMessage)),
),
...provider.myList.map((e) => Text(e)).toList(),
StreamBuilder(
stream: _channel.stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
// ERROR HERE!
provider.addItem('I was added');
return Text("Item added");
} else if (snapshot.hasError) {
return Text(snapshot.error as String);
} else {
return CircularProgressIndicator();
}
},
)
]);
},
);
}
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_channel.sink.add(_controller.text);
print('done');
}
}
}
Which the following output (Chrome):
Now, when I click on the send button, it calls _sendMessage() (code above). And then since the StreamBuilder() hasData it runs this line (code above):
provider.addItem('I was added');
However, this is where my error appears, I am getting the following error:
The following assertion was thrown while dispatching notifications for ProviderModel:
setState() or markNeedsBuild() called during build.
Why am I getting this error? Where is the widget rebuilding? See this answer to Flutter Provider setState() or markNeedsBuild() called during build
You can take help from addPostFrameCallback, but the cost is it will keep rebuilding on every frame, to control this behavior you can use a bool on state class.
bool isDone = false;
void addItemH() {
if (!isDone) {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
Provider.of<ProviderModel>(context, listen: false)
.addItem('I was added');
isDone = true;
});
}
}
And builder
builder: (context, snapshot) {
if (snapshot.hasData) {
addItemH();
return Text("Item added");
And to control the next insertaion.
void _sendMessage() {
if (_controller.text.isNotEmpty) {
isDone = false;
_channel.sink.add(_controller.text);
print('done');
}
}
}
If you just want to add data only single time, it is better to do inside inside initState.
late Future<Kategori> _futureArticles;
late Future<Article> _futureSummary;
and the API's
#override
void initState() {
_futureArticles = _newsService.getArticlesByCategory(widget.id);
_futureSummary = _newsService.getArticleById(widget.id);
super.initState();
}
and FutureBuilder
child: FutureBuilder<Kategori>(
future: _futureArticles,
builder: (BuildContext context, AsyncSnapshot<Kategori> snapshot) {
if (snapshot.hasData) {
final articles = snapshot.data?.data;
now with FutureArticles and with this structure everything works but I need an another json value from _futureSummary. Both API's has got same ID values, so I can get the json.summary value from second API. But how? I tried to use future.wait but it did not work.
Meanwhile I am using second APi on different page to get all informations of a spesific news.
What is the correct approach?
Not sure what you are trying to achieve. Do you want your Future builder to rebuild only when both futures completed? If so - try to combine both futures. Future.wait will wait for all Future objects you pass to complete, and return List of results:
Let me update my answer with the working demo - you can test it in DartPad. Note that the first Future will complete after 1 second (and write the log in the console), but the FutureBuilder will wait until the second Future is completed, and only then show the values from both.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
late Future<String> _futureArticles;
late Future<int> _futureSummary;
#override
void initState() {
_futureArticles = Future.delayed(const Duration(seconds:1), () {print("First is done"); return "First is done";});
_futureSummary = Future.delayed(const Duration(seconds:5), () => 10);
super.initState();
}
#override
Widget build(BuildContext context) {
return FutureBuilder<List<dynamic>>(
future: Future.wait([_futureArticles, _futureSummary]),
builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
if (snapshot.hasData) {
final articles = snapshot.data![0] as String;
final summary= snapshot.data![1] as int;
return Column(children:[
Text(articles),
Text('$summary')
]);
} else {
return const CircularProgressIndicator();
}
});
}
}
My problem is that, before showing the screen. It should load the necessary data while displaying a splashscreen.
It works fine, until it goes to the create provider, the data which has been loaded into the list is getting cleared due to the list getting recreated. I wonder how can i tackle this? How should i load the data (json) file into the list instead.
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late Future<void> loadJson;
#override
void initState() {
loadJson = QuestionProvider().loadJsonFiles();
super.initState();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: loadJson,
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const MaterialApp(home: Splash());
} else {
return MultiProvider(
providers: [
ChangeNotifierProvider<QuestionProvider>(create: (_) => QuestionProvider()),
],
child: MaterialApp(
title: "MyApp",
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: const Home(),
)
);
}
},
);
}
}
class QuestionProvider with ChangeNotifier {
final List<QuestionModel> questionList = <QuestionModel>[];
Future<void> loadJsonFiles() async {
final String response = await rootBundle.loadString("assets/questions.json");
final Map<String, dynamic> data = await jsonDecode(response);
for (int i = 0; i < data.length; i++) {
questionList.add(QuestionModel.fromJson(data[i]));
}
}
}
Why not invert the future builder and the providers?
Widget build(BuildContext context) {
return MultiProvider(
[...],
child: Builder(
builder: (context) =>
FutureBuilder(
future: Provider.of<QuestionProvider>().loadJsonFiles,
child: [...]
),
),
);
}
There may or may not be some disadvantages to this method, specifically, the value of the future is no longer cached, if this worries you, I recommend you cache the value within the QuestionProvider class itself.
I am trying to set the home page of the Flutter app asynchronously, but that is not working because the build method cannot have async properties.
class _MyAppState extends State<MyApp> {
// Widget homeWidget;
// #override
// void initState() async {
// super.initState();
// homeWidget = (await AuthUser.getCurrentUser() != null)
// ? NavBarPage()
// : OnBoardingWidget();
// }
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WizTkt',
theme: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(brightness: Brightness.dark),
primaryColor: Colors.blue),
home: (await AuthUser.getCurrentUser() != null)
? NavBarPage()
: OnBoardingWidget(),
);
}
}
As you can see in the code, I also tried to use initState to set the homepage widget but I cannot make initState an asynchronous function. I feel like there is a better way to choose your homepage in Flutter. What am I missing?
Do note that AuthUser.getCurrentUser() has to be an async function because I use the SharedPreferences library to obtain the login token stored in memory.
You can use FutureBuilder which allows you to build an Widget in a future time.
Here an example:
class OnBoardingWidget extends StatefulWidget {
const OnBoardingWidget({Key key}) : super(key: key);
#override
State<OnBoardingWidget> createState() => _OnBoardingWidgetState();
}
class _OnBoardingWidgetState extends State<OnBoardingWidget> {
final Future<String> _waiter = Future<String>.delayed(
const Duration(seconds: 2), () => 'Data Loaded',
);
#override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder<String>(
future: _waiter,
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
Widget wdgt;
if (snapshot.hasData) {
wdgt = Text('Result: ${snapshot.data}');
} else if (snapshot.hasError) {
wdgt = Text('Ops ops ops');
} else {
wdgt = Text('Not ready yet');
}
return Center(child: wdgt);
},
),
);
}
}
I have a list of widgets and a function which returns a Container telling user to add to the list if the list of widgets is empty:
_isCountEmpty() {
if (count == 0 || count == null) {
//if no widgets in list
return Container(
color: Colors.black,
child: Text('Press edit to start adding exercises',
style: TextStyle(
fontSize: 40,
color: Colors.white,
)));
}
//if widgets in list
return ListView(
children: children,
scrollDirection: Axis.vertical,
);
}
initState where count is obtained:
void initState() {
getCount().then(updateCount);
super.initState(); }
The count value is received from another page using shared preferences which are called in my initState. Before the count value is received in the initState the screen thinks the value for count is null therefore for just a split second the Container() is returned just before the ListView.
Instead of this, I want the circular indicator to show while the screen is getting the value of count from initState, and then return the Container or ListView after the value for count is obtained
Thank you
You can try the following code which would load your counter from shared preferences then you can replace the Text widget with whatever list you want or container if the counter == 0 || counter == null
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int counter;
Future<SharedPreferences> prefs;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder(
future: prefs,
builder: (context, AsyncSnapshot<SharedPreferences> snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
} else {
counter = snapshot.data.getInt("counter");
//Replace with whatever widget you want
return Text("Loading is done your counter is : $counter");
}
},
)),
);
}
#override
void initState() {
super.initState();
prefs = SharedPreferences.getInstance();
}
}