我正在学习 flutter 来开发一个大学项目，但是我遇到了问题，在编译代码时出现了两个错误

问题描述 投票：0回答：2
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?'可以为 null 而 'Animation' 不是。

-'动画'来自'package:flutter/src/animation/animation.dart' ('../flutter/packages/flutter/lib/src/animation/animation.dart')。进度：_tabController.animation，^

lib/main.dart:13:17: 错误：应初始化字段“_tabController”，因为其类型“TabController”不允许为空。

-'TabController' 来自'package:flutter/src/material/tab_controller.dart' ('../flutter/packages/flutter/lib/src/material/tab_controller.dart')。标签控制器 _tabController;

^^^^^^^^^^^^^^^

无法编译应用程序。

android flutter animation mobile android-animation
2个回答
1
投票
import 'package:flutter/material.dart';


class AppMenuAbas extends StatefulWidget {
  @override
  _AppMenuAbasState createState() => _AppMenuAbasState();
}

class _AppMenuAbasState extends State<AppMenuAbas>
    with SingleTickerProviderStateMixin {
  late 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 ?? AlwaysStoppedAnimation<double>(0),
            ),
            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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

对于 tabController，您必须在使用之前对程序说您将定义 tabController，我们可以为此使用 

late
。因为当屏幕将在 initState 中加载时，它将被定义。

对于动画错误，您的值为

nullable
。并且您的代码需要它
non-null
我们可以在这种情况下使用
??
。这意味着如果此值为 null 则使用此。我添加了随机动画，因为我不知道你的代码到底做了什么。您可以根据自己的目标对其进行编辑。

1
投票

尝试这些改变

late final TabController _tabController; //Using late initialisation

progress: _tabController.animation!, //Using not null operator

我建议在适用的情况下使用 const 作为良好实践和优化。

我做了如下几个优化：

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(AppMenuAbas());
}

class AppMenuAbas extends StatefulWidget {
  @override
  _AppMenuAbasState createState() => _AppMenuAbasState();
}

class _AppMenuAbasState extends State<AppMenuAbas> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App com Menu e Abas',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  bool _isCollapsed = true;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void toggleCollapsed() {
    setState(() {
      _isCollapsed = !_isCollapsed;
    });
  }

  @override
  void initState() {
    _tabController = TabController(vsync: this, length: 4);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(
        title: const 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: const [
            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: [
                const Text(
                  'Título Centralizado',
                  style: TextStyle(fontSize: 24),
                ),
                const 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: const [
                          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: const [
                          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: const [
                          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: const [
                          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: const [
                          Icon(Icons.ac_unit),
                          Text('Conteúdo 5'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          // Conteúdo da segunda aba (Texto)
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                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: [
                      const CircleAvatar(
                        radius: 50,
                        backgroundImage: AssetImage('assets/person1.jpg'),
                      ),
                      const SizedBox(height: 10),
                      const Text('Pessoa 1'),
                      const SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('Botão'),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                Container(
                  width: screenWidth / 3,
                  height: screenWidth / 3,
                  decoration: BoxDecoration(
                    border: Border.all(width: 1),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const CircleAvatar(
                        radius: 50,
                        backgroundImage: AssetImage('assets/person2.jpg'),
                      ),
                      const SizedBox(height: 10),
                      const Text('Pessoa 2'),
                      const SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('Botão'),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                Container(
                  width: screenWidth / 3,
                  height: screenWidth / 3,
                  decoration: BoxDecoration(
                    border: Border.all(width: 1),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const CircleAvatar(
                        radius: 50,
                        backgroundImage: AssetImage('assets/person3.jpg'),
                      ),
                      const SizedBox(height: 10),
                      const Text('Pessoa 3'),
                      const SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('Botão'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // Conteúdo da quarta aba (Chat)
          const Center(
            child: Text(
              'Conteúdo do Chat',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ],
      ),
    );
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.