Question posted in 
import 'package:flutter/material.dart';
void main() {
runApp(AppMenuAbas());
}
class AppMenuAbas extends StatefulWidget {
@override
_AppMenuAbasState createState() => _AppMenuAbasState();
}
class _AppMenuAbasState extends State<AppMenuAbas> with SingleTickerProviderStateMixin {
TabController _tabController;
bool _isCollapsed = true;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 4);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
void toggleCollapsed() {
setState(() {
_isCollapsed = !_isCollapsed;
});
}
@override
Widget build(BuildContext context) {
final double screenWidth = MediaQuery.of(context).size.width;
return MaterialApp(
title: 'App com Menu e Abas',
home: Scaffold(
appBar: AppBar(
title: Text('App com Menu e Abas'),
centerTitle: true,
leading: IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _tabController.animation,
),
onPressed: () {
setState(() {
if (_isCollapsed) {
_tabController.animateTo(0);
}
toggleCollapsed();
});
},
),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.home), text: 'Home'),
Tab(icon: Icon(Icons.description), text: 'Texto'),
Tab(icon: Icon(Icons.people), text: 'Pessoas'),
Tab(icon: Icon(Icons.chat), text: 'Chat'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
// Conteúdo da primeira aba (Home)
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Título Centralizado',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: screenWidth / 5,
height: screenWidth / 5,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('Conteúdo 1'),
],
),
),
Container(
width: screenWidth / 5,
height:screenWidth / 5,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('Conteúdo 2'),
],
),
),
Container(
width: screenWidth / 5,
height: screenWidth / 5,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('Conteúdo 3'),
],
),
),
Container(
width: screenWidth / 5,
height: screenWidth / 5,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('Conteúdo 4'),
],
),
),
Container(
width: screenWidth / 5,
height: screenWidth / 5,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('Conteúdo 5'),
],
),
),
],
),
],
),
),
// Conteúdo da segunda aba (Texto)
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Texto Extenso 1',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
Text(
'Texto Extenso 2',
style: TextStyle(fontSize: 24),
),
],
),
),
// Conteúdo da terceira aba (Pessoas)
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: screenWidth / 3,
height: screenWidth / 3,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/person1.jpg'),
),
SizedBox(height: 10),
Text('Pessoa 1'),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {},
child: Text('Botão'),
),
],
),
),
SizedBox(height: 20),
Container(
width: screenWidth / 3,
height: screenWidth / 3,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/person2.jpg'),
),
SizedBox(height: 10),
Text('Pessoa 2'),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {},
child: Text('Botão'),
),
],
),
),
SizedBox(height: 20),
Container(
width: screenWidth / 3,
height: screenWidth / 3,
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/person3.jpg'),
),
SizedBox(height: 10),
Text('Pessoa 3'),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {},
child: Text('Botão'),
),
],
),
),
],
),
),
// Conteúdo da quarta aba (Chat)
Center(
child: Text(
'Conteúdo do Chat',
style: TextStyle(fontSize: 24),
),
),
],
),
),
);
}
}
The errors shown are:
lib/main.dart:47:40: Error: The argument type ‘Animation<double>?’ can’t be assigned to the parameter type ‘Animation<double>’ because ‘Animation<double>?’ is nullable and ‘Animation<double>’ isn’t.
-‘Animation’ is from ‘package:flutter/src/animation/animation.dart’ (‘../flutter/packages/flutter/lib/src/animation/animation.dart’). progress: _tabController.animation, ^
lib/main.dart:13:17: Error: Field ‘_tabController’ should be initialized because its type ‘TabController’ doesn’t allow null.
-‘TabController’ is from ‘package:flutter/src/material/tab_controller.dart’ (‘../flutter/packages/flutter/lib/src/material/tab_controller.dart’). TabController _tabController;
^^^^^^^^^^^^^^
Failed to compile application.
2
Answers
for tabController you have to say to the program you will define the tabController before you use it and we can use
latefor this. Because when screen will load in initState it will be defined.For Animation error your value is
nullable. And your code wants itnon-nullwe can use??for situations like this. It means if this value is null then use this. And i add random Animation because i don’t know exactly what your code does. You can edit it for your aim.try with these changes
I suggest using const wherever applicable as a good practice and optimisation.
I have made few optimisation as below: