I'm developing a Flutter app which prompts a form asking for some personal info.
The problem is that the page is being rebuilt every time something happens, like when the screen orientation changes or when a text field gets the focus (the keyboard appears and disappears right away, preventing the user from typing anything).
Obviously something is triggering unwanted rebuilds, but I couldn't find out what and where.
When I plug this page as the homepage, everything works fine. The issue happens when I plug the page at its intended position, after an animation is displayed on a splash screen, so I guess it has something to do with my problem.
Main class :
import 'package:flutter/material.dart';
import './view/SplashScreen.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SplashScreen(),
);
}
}
Splash screen :
import 'package:flutter/material.dart';
import 'dart:async';
import './UserLoader.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => new _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
AnimationController _iconAnimationController;
CurvedAnimation _iconAnimation;
@override
void initState() {
super.initState();
_iconAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 2000));
_iconAnimation = new CurvedAnimation(
parent: _iconAnimationController, curve: Curves.easeIn);
_iconAnimation.addListener(() => this.setState(() {}));
_iconAnimationController.forward();
startTimeout();
}
@override
Widget build(BuildContext context) {
return new Material(
color: Colors.white,
child: new InkWell(
child: new Center(
child: new Container(
width: 275.0,
height: 275.0,
decoration: new BoxDecoration(
image: new DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.white.withOpacity(_iconAnimation.value),
BlendMode.dstATop),
image: new AssetImage("images/logo.png")),
),
),
),
),
);
}
void handleTimeout() {
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => new UserLoader()));
}
startTimeout() async {
var duration = const Duration(seconds: 3);
return new Timer(duration, handleTimeout);
}
}
Faulty page :
import 'package:flutter/material.dart';
class UserLoader extends StatefulWidget {
@override
_UserLoaderState createState() => new _UserLoaderState();
}
class _UserLoaderState extends State<UserLoader> {
@override
Widget build(BuildContext context) {
final _formKey = new GlobalKey<FormState>();
final _emailController = new TextEditingController();
return new Scaffold(
appBar: new AppBar(
title: new Text("Informations"),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.save),
onPressed: () {
// unrelated stuff happens here
})
],
),
body: new Center(
child: new SingleChildScrollView(
child: new Form(
key: _formKey,
child: new Column(children: <Widget>[
new ListTile(
leading: const Icon(Icons.email),
title: new TextFormField(
decoration: new InputDecoration(
hintText: "Email",
),
keyboardType: TextInputType.emailAddress,
controller: _emailController,
validator: _validateEmail,
),
),
]))),
));
}}
Can anybody help me find out why the page is continuously rebuilding itself ?
Using setState to rebuild widgets Flutter gives you access to setState() . In this case, we have to ensure setState() has the new values. When setState() is called, Flutter will know to get these new values and mark the widget that needs to be rebuilt.
Basically reloading the original route when navigating to a second one is as simple as waiting for the result of the second route (using then() or async / await ) which is determined by the argument given to pop() .
All you need to do is move this row
final _formKey = new GlobalKey<FormState>();
from build
method to state class declaration (i.e. outside from build
). Key must be created once when class is created. In your case the key is re-created each build action.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With