Non-nullable instance field ['controller'] must be initialized in flutter - flutter

Question

Good day!
I am a new to Flutter to would like to start my Startup but I was trapped in this problem to make Tabbar example...
I have almost been frustrated all day because of this problems....
Dart Analysis keeps saying this below....
Non-nullable instance field ['controller'] must be initialized in flutter
really appreciate in advance.
import 'package:flutter/material.dart';
import 'sub/firstPage.dart';
import 'sub/secondPage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
TabController controller;
#override
void initState() {
super.initState();
controller = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
),
body: TabBarView(
children: <Widget>[FirstApp(), SecondApp()],
controller: controller,
),
bottomNavigationBar: TabBar(tabs: [
Tab(icon: Icon(Icons.looks_one, color: Colors.blue),),
Tab(icon: Icon(Icons.looks_two, color: Colors.blue),),
],
)
);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

Answer 1

Plase try, you missed use controller
import 'package:flutter/material.dart';
import 'sub/firstPage.dart';
import 'sub/secondPage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
late TabController controller;
#override
void initState() {
super.initState();
controller = TabController(length: 2, vsync: this);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
),
body: TabBarView(
children: <Widget>[FirstApp(), SecondApp()],
controller: controller,
),
bottomNavigationBar: TabBar(
controller: controller, // add here
tabs: [
Tab(icon: Icon(Icons.looks_one, color: Colors.blue),),
Tab(icon: Icon(Icons.looks_two, color: Colors.blue),),
],
)
);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
}

Answer 2

Since your field does not allow null values, but you cannot initialize your field when it's created, you have to declare it as late:
late TabController controller;
This allows you to assign a value later, but you will get an exception if you use it before it was assigned. The way your code looks, it should be okay.

Answer 3

It looks like you are using null safety in your project. So the dart is complaining about this line. Dart expects it to be initialized right after it was created:
TabController controller;
To fix the problem add the "late" keyword before TabController:
late TabController controller;