Recursos Adicionais

AnimatedContainer

Container que anima mudanças em suas propriedades:

class FormaAnimada extends StatefulWidget {
  @override
  State<FormaAnimada> createState() => _FormaAnimadaState();
}

class _FormaAnimadaState extends State<FormaAnimada> {
  double _tamanho = 100;
  Color _cor = Colors.blue;

  void _mudar() {
    setState(() {
      _tamanho = _tamanho == 100 ? 200 : 100;
      _cor = _cor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedContainer(
          duration: Duration(seconds: 1),
          width: _tamanho,
          height: _tamanho,
          color: _cor,
        ),
        ElevatedButton(
          onPressed: _mudar,
          child: Text('Mudar'),
        ),
      ],
    );
  }
}

Temas e estilos

Flutter permite customizar o tema da aplicação:

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
    ),
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.blue,
  ),
  themeMode: ThemeMode.system,
  home: MinhaTela(),
)

Acessando o tema:

final tema = Theme.of(context);
Container(
  color: tema.primaryColor,
  child: Text(
    'Texto',
    style: tema.textTheme.headlineLarge,
  ),
)

Exercícios

1. AnimatedContainer: Crie um AnimatedContainer que mude de cor e tamanho quando um botão for pressionado. A animação deve durar 1 segundo.

2. Tema customizado: Crie um aplicativo com um tema customizado. Defina cores primárias, secundárias e estilos de texto personalizados.

3. Tema claro e escuro: Crie um aplicativo que permita alternar entre tema claro e escuro. Use um botão para mudar o tema.

4. AnimatedContainer com múltiplas propriedades: Crie um AnimatedContainer que anime mudanças em cor, tamanho e bordas arredondadas simultaneamente.

5. Acessando tema: Crie um widget que use Theme.of(context) para acessar diferentes propriedades do tema (cores, estilos de texto, etc.) e exiba essas informações na tela.

Soluções

Ver solução do exercício 1

import 'package:flutter/material.dart';

class AnimacaoContainer extends StatefulWidget {
  @override
  State<AnimacaoContainer> createState() => _AnimacaoContainerState();
}

class _AnimacaoContainerState extends State<AnimacaoContainer> {
  double _tamanho = 100;
  Color _cor = Colors.blue;

  void _mudar() {
    setState(() {
      _tamanho = _tamanho == 100 ? 200 : 100;
      _cor = _cor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              duration: Duration(seconds: 1),
              width: _tamanho,
              height: _tamanho,
              color: _cor,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _mudar,
              child: Text('Mudar'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: AnimacaoContainer()));
}

Ver solução do exercício 2

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.purple,
      colorScheme: ColorScheme.light(
        primary: Colors.purple,
        secondary: Colors.orange,
      ),
      textTheme: TextTheme(
        headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
        bodyLarge: TextStyle(fontSize: 18),
      ),
    ),
    home: Scaffold(
      appBar: AppBar(title: Text('Tema Customizado')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Título Grande', style: Theme.of(context).textTheme.headlineLarge),
            SizedBox(height: 20),
            Text('Texto Normal', style: Theme.of(context).textTheme.bodyLarge),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Botão'),
            ),
          ],
        ),
      ),
    ),
  ));
}

Ver solução do exercício 3

import 'package:flutter/material.dart';

void main() {
  runApp(MinhaApp());
}

class MinhaApp extends StatefulWidget {
  @override
  State<MinhaApp> createState() => _MinhaAppState();
}

class _MinhaAppState extends State<MinhaApp> {
  ThemeMode _tema = ThemeMode.light;

  void _alternarTema() {
    setState(() {
      _tema = _tema == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: _tema,
      home: Scaffold(
        appBar: AppBar(title: Text('Tema Claro/Escuro')),
        body: Center(
          child: ElevatedButton(
            onPressed: _alternarTema,
            child: Text('Alternar Tema'),
          ),
        ),
      ),
    );
  }
}

Ver solução do exercício 4

import 'package:flutter/material.dart';

class AnimacaoMultipla extends StatefulWidget {
  @override
  State<AnimacaoMultipla> createState() => _AnimacaoMultiplaState();
}

class _AnimacaoMultiplaState extends State<AnimacaoMultipla> {
  double _tamanho = 100;
  Color _cor = Colors.blue;
  double _borda = 0;

  void _mudar() {
    setState(() {
      _tamanho = _tamanho == 100 ? 200 : 100;
      _cor = _cor == Colors.blue ? Colors.red : Colors.blue;
      _borda = _borda == 0 ? 50 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animação Múltipla')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              duration: Duration(seconds: 1),
              width: _tamanho,
              height: _tamanho,
              decoration: BoxDecoration(
                color: _cor,
                borderRadius: BorderRadius.circular(_borda),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _mudar,
              child: Text('Mudar'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: AnimacaoMultipla()));
}

Ver solução do exercício 5

import 'package:flutter/material.dart';

class AcessarTema extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tema = Theme.of(context);
    
    return Scaffold(
      appBar: AppBar(title: Text('Acessar Tema')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Cor Primária:', style: TextStyle(fontSize: 18)),
            Container(
              width: 100,
              height: 50,
              color: tema.primaryColor,
            ),
            SizedBox(height: 20),
            Text('Cor Secundária:', style: TextStyle(fontSize: 18)),
            Container(
              width: 100,
              height: 50,
              color: tema.colorScheme.secondary,
            ),
            SizedBox(height: 20),
            Text('Estilo de Título:', style: tema.textTheme.headlineSmall),
            SizedBox(height: 20),
            Text('Estilo de Corpo:', style: tema.textTheme.bodyLarge),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
      textTheme: TextTheme(
        headlineSmall: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        bodyLarge: TextStyle(fontSize: 16),
      ),
    ),
    home: AcessarTema(),
  ));
}