I'm learning flutter to develop a college project, but I'm having problems with two errors presented when compiling the code

Question

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.

If you use the answer from Hüseyin below, you'll still run into the unrelated problem, that you try to access MediaQuery.of(context) before you create such a context that provides a MediaQuery. You might want to look here: https://stackoverflow.com/questions/68635405/no-mediaquery-widget-ancestor-found — Stephan, May 06 '23 at 00:54

score 1 · Answer 1 · answered May 06 '23 at 00:38

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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

for tabController you have to say to the program you will define the tabController before you use it and we can use late for this. Because when screen will load in initState it will be defined.

For Animation error your value is nullable. And your code wants it non-null we 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.

this will throw runtime error as the build function is using MediaQuery and it will fail to get the context — Niladri Raychaudhuri, May 06 '23 at 00:49

score 1 · Answer 2 · answered May 06 '23 at 00:54

try with these changes

late final TabController _tabController; //Using late initialisation

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

I suggest using const wherever applicable as a good practice and optimisation.

I have made few optimisation as below:

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),
            ),
          ),
        ],
      ),
    );
  }
}

Yes you are right, i copied the code and i thought there was a use case for his program that he wrote like this. and solved it with my own way but you are right this is real correct answer. — Hüseyin Sezen, May 06 '23 at 00:59

I'm learning flutter to develop a college project, but I'm having problems with two errors presented when compiling the code

2 Answers2