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),
),
),
],
),
),
);
}
}显示的错误包括：
lib/main.dart：47：40：错误：无法将参数类型“Animation？”分配给参数类型“Animation”，因为“Animation？”可为空，而“Animation”不可为空。
-'Animation'来自'package：flutter/src/animation/animation.dart'（'../flutter/packages/flutter/lib/src/animation/animation. dart'）。progress：_tabController.animation，^
lib/main.dart：13：17：错误：应初始化字段“_tabController”，因为其类型“TabController”不允许为null。
-'TabController'来自'package：flutter/src/material/tab_controller.dart'（'../flutter/packages/flutter/lib/src/material/tab_controller. dart'）。TabController _tabController;
^^^^^^^^^^^^^^
无法编译应用程序。
2条答案
按热度按时间rsaldnfx1#
对于tabController，你必须告诉程序，你将在使用它之前定义tabController，我们可以使用
late。因为当屏幕加载到initState时，它将被定义。对于动画错误，您的值为
nullable。你的代码需要它non-null，我们可以在这种情况下使用??。这意味着如果这个值为null，那么使用this。我添加了随机动画，因为我不知道你的代码到底是做什么的。你可以根据你的目标编辑它。a0x5cqrl2#
尝试这些变化
我建议在任何适用的地方使用const作为一个良好的实践和优化。
我做了一些优化，如下：