I'm a new flutter dev and while working on a flutter UI template I found online, I ran into this error that I can't seem to fix.
Here is the error: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ The following _TypeError was thrown building Builder: Null check operator used on a null value
The relevant error-causing widget was: MaterialApp MaterialApp:file:///C:/Users/Owner/Desktop/Dzidzo/Mobile%20application/dzidzo/lib/main.dart:21:18
When the exception was thrown, this was the stack: #0 _MyDiaryScreenState.initState (package:dzidzo/fitness_app/my_diary/my_diary_screen.dart:30:47) #1 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5219:55) #2 ComponentElement.mount (package:flutter/src/widgets/framework.dart:5062:5)
Here is the code that seems to be causing the error:
class MyDiaryScreen extends StatefulWidget {
const MyDiaryScreen({Key? key, this.animationController}) : super(key: key);
final AnimationController? animationController;
@override
_MyDiaryScreenState createState() => _MyDiaryScreenState();
}
class _MyDiaryScreenState extends State<MyDiaryScreen>
with TickerProviderStateMixin {
Animation<double>? topBarAnimation;
List<Widget> listViews = <Widget>[];
final ScrollController scrollController = ScrollController();
double topBarOpacity = 0.0;
@override
void initState() {
topBarAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: widget.animationController!,
curve: Interval(0, 0.5, curve: Curves.fastOutSlowIn)));
addAllListData();
scrollController.addListener(() {
if (scrollController.offset >= 24) {
if (topBarOpacity != 1.0) {
setState(() {
topBarOpacity = 1.0;
});
}
} else if (scrollController.offset <= 24 &&
scrollController.offset >= 0) {
if (topBarOpacity != scrollController.offset / 24) {
setState(() {
topBarOpacity = scrollController.offset / 24;
});
}
} else if (scrollController.offset <= 0) {
if (topBarOpacity != 0.0) {
setState(() {
topBarOpacity = 0.0;
});
}
}
});
super.initState();
}
void addAllListData() {
const int count = 9;
listViews.add(
TitleView(
titleTxt: 'Mediterranean diet',
subTxt: 'Details',
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 0, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
MediterranesnDietView(
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 1, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
TitleView(
titleTxt: 'Meals today',
subTxt: 'Customize',
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 2, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
MealsListView(
mainScreenAnimation: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: widget.animationController!,
curve: Interval((1 / count) * 3, 1.0,
curve: Curves.fastOutSlowIn))),
mainScreenAnimationController: widget.animationController,
),
);
listViews.add(
TitleView(
titleTxt: 'Body measurement',
subTxt: 'Today',
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 4, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
BodyMeasurementView(
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 5, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
TitleView(
titleTxt: 'Water',
subTxt: 'Aqua SmartBottle',
animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: widget.animationController!,
curve:
Interval((1 / count) * 6, 1.0, curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!,
),
);
listViews.add(
WaterView(
mainScreenAnimation: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: widget.animationController!,
curve: Interval((1 / count) * 7, 1.0,
curve: Curves.fastOutSlowIn))),
mainScreenAnimationController: widget.animationController!,
),
);
listViews.add(
GlassView(
animation: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: widget.animationController!,
curve: Interval((1 / count) * 8, 1.0,
curve: Curves.fastOutSlowIn))),
animationController: widget.animationController!),
);
}
Future<bool> getData() async {
await Future<dynamic>.delayed(const Duration(milliseconds: 50));
return true;
}
@override
Widget build(BuildContext context) {
return Container(
color: FitnessAppTheme.background,
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
getMainListViewUI(),
getAppBarUI(),
SizedBox(
height: MediaQuery.of(context).padding.bottom,
)
],
),
),
);
}
Widget getMainListViewUI() {
return FutureBuilder<bool>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
} else {
return ListView.builder(
controller: scrollController,
padding: EdgeInsets.only(
top: AppBar().preferredSize.height +
MediaQuery.of(context).padding.top +
24,
bottom: 62 + MediaQuery.of(context).padding.bottom,
),
itemCount: listViews.length,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
widget.animationController?.forward();
return listViews[index];
},
);
}
},
);
}
Widget getAppBarUI() {
return Column(
children: <Widget>[
AnimatedBuilder(
animation: widget.animationController!,
builder: (BuildContext context, Widget? child) {
return FadeTransition(
opacity: topBarAnimation!,
child: Transform(
transform: Matrix4.translationValues(
0.0, 30 * (1.0 - topBarAnimation!.value), 0.0),
child: Container(
decoration: BoxDecoration(
color: FitnessAppTheme.white.withOpacity(topBarOpacity),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(32.0),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: FitnessAppTheme.grey
.withOpacity(0.4 * topBarOpacity),
offset: const Offset(1.1, 1.1),
blurRadius: 10.0),
],
),
child: Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).padding.top,
),
Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 16 - 8.0 * topBarOpacity,
bottom: 12 - 8.0 * topBarOpacity),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'My Diary',
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: FitnessAppTheme.fontName,
fontWeight: FontWeight.w700,
fontSize: 22 + 6 - 6 * topBarOpacity,
letterSpacing: 1.2,
color: FitnessAppTheme.darkerText,
),
),
),
),
SizedBox(
height: 38,
width: 38,
child: InkWell(
highlightColor: Colors.transparent,
borderRadius: const BorderRadius.all(
Radius.circular(32.0)),
onTap: () {},
child: Center(
child: Icon(
Icons.keyboard_arrow_left,
color: FitnessAppTheme.grey,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 8,
right: 8,
),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8),
child: Icon(
Icons.calendar_today,
color: FitnessAppTheme.grey,
size: 18,
),
),
Text(
'15 May',
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: FitnessAppTheme.fontName,
fontWeight: FontWeight.normal,
fontSize: 18,
letterSpacing: -0.2,
color: FitnessAppTheme.darkerText,
),
),
],
),
),
SizedBox(
height: 38,
width: 38,
child: InkWell(
highlightColor: Colors.transparent,
borderRadius: const BorderRadius.all(
Radius.circular(32.0)),
onTap: () {},
child: Center(
child: Icon(
Icons.keyboard_arrow_right,
color: FitnessAppTheme.grey,
),
),
),
),
],
),
)
],
),
),
),
);
},
)
],
);
}
}
I tried many solutions online that said something about replacing the null operator ! with ??"" but i can't seem to make it work
The error you're encountering is due to the use of the null check operator (!) on a nullable value widget.animationController.
Your MyDiaryScreen widget relies on an AnimationController, which is currently nullable. To address this, make the animationController parameter nonnullable and required when passing it as a parameter. This way, you won't need to use the null check operator (!) throughout your widget code.
class MyDiaryScreen extends StatefulWidget {
const MyDiaryScreen({Key? key, required this.animationController})
: super(key: key);
final AnimationController animationController;
@override
_MyDiaryScreenState createState() => _MyDiaryScreenState();
}
Every time you use the MyDiaryScreen widget, ensure you provide the necessary animationController.
OR
Consider whether it's necessary to provide the animation controller as an argument. If you can create a new animation controller within MyDiaryScreen, you can make the following changes:
class MyDiaryScreen extends StatefulWidget {
const MyDiaryScreen({Key? key}) : super(key: key);
@override
_MyDiaryScreenState createState() => _MyDiaryScreenState();
}
class _MyDiaryScreenState extends State<MyDiaryScreen>
with TickerProviderStateMixin {
late AnimationController animationController;
@override
void initState() {
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
// rest of your initState code...
}
// rest of your _MyDiaryScreenState class...
}
This way, you create a new AnimationController within the MyDiaryScreen widget and avoid the need for external initialization.