What is the equivalent for `componentDidMount()` in Flutter - reactjs

Question

I coming from ReactJS and React Native. I want to try out Flutter. So far I want to have a login screen. Therefore I want to check if a user is already logged in. If so forward to the Home Screen. If not, show the login screen.
In React with TypeScript and Firebase I would to it this way:
interface RootScreenState {
isLoading: boolean;
user: firebase.User | null;
}
class RootScreen extends React.Component<{}, RootScreenState> {
constructor(props) {
super(props);
this.state = {
isLoading: true,
user: null
}
}
componentDidMount() {
// make an async call to some firebase libraries to look for stored user credentials
// if some credentials are found try to login
// of no credentials are found or login fails return null
// otherwise the user is returned
tryToLogin().then((currentUser: firebase.User | null) => {
this.setState({
isLoading: false,
user: currentUser
}).catch(err => { /* do some error handling */});
}
render() {
const { isLoading, user } = this.state;
if(isLoading) return ( /* loading screen */ );
else if(user === null) return ( /* login screen */ );
else return ( /* home screen */ );
}
}
How do I do with Flutter? I could not find anything about an equivalent to compnentDidMount(), should I do it in the constructor? In React this would fail.

Answer 1

use initState in Stateful widget.InitState is called when the stateful widget is first time painted. For ex
class _MyAppState extends State<MyApp> {
Future<Album> futureAlbum;
#override
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}

Answer 2

You can do this in Flutter's initState.
It gets called first when your widget tree is rendered.
Check the code below:
#override
void initState() {
super.initState();
}
For more details on various things in React Native you wished to know in Flutter.
See the link below: It is the official documentation of people coming to Flutter from a React Native background.
Documentation
I hope this helps.

Answer 3

When it comes to request data from the server, you may want to use FutureBuilder directly.
Sometimes widget build will trigger twice if you put states in initial of state improperly.
I prefer to put FutureBuilder into widget build scope and more clean and readable for me.

Answer 4

In your case, as you also work with navigation, I would work with a FutureBuilder. Initialize the framework, look for the user and navigate the user to the proper screen based on the state with initialroute.
If you want it nicer, you can play around with a SplashScreen. A good package you can use is flutter_native_splash. You will also find a full example there.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FutureBuilder(
// The event you are waiting for (can also be your user object, once loaded)
future: _initializeFrameworks,
builder: (context, snapshot) {
// Show splash screen
if (snapshot.connectionState == ConnectionState.waiting) {
return MaterialApp(home: SplashScreen());
} else {
// Return app and navigate
return MaterialApp(
initialRoute: snapshot.data ? MainScreen.id : WelcomeScreen.id,
routes: {
WelcomeScreen.id: (context) => WelcomeScreen(),
MainScreen.id: (context) => MainScreen(),
},
);
}
},
);
}
}
class Mainscreen extends StatelessWidget {
static const id = "main_screen";
// your widget goes here
}
class WelcomeScreen extends StatelessWidget {
static const id = "welcome_screen";
// your widget goes here
}