Dark Mode com Flutter

O modo escuro, ou dark mode, está mais presente do que nunca! Nesse modo a UI (User Interface) do seu App, Site ou S.O fica mais escura, em tons de preto e cinza. Esse modo é mais vantajoso porque consome menos energia em dispositivos com telas OLED e agride bem menos os olhos do usuário. Nesse artigo irei explicar como incluir o Dark Mode em aplicações Flutter. Insira suas aplicações nesse mundo do Dark Mode de uma forma bem simples! Sem usar pacotes externos ou mexer no arquivo pubspec.yml!

Criando o projeto

Para fazer a transição para o modo escuro vamos fazer de modo a englobar todo o App. Por isso não vamos utilizar um App básico criado pelo próprio Flutter quando iniciamos um projeto, ao invés usar um aplicativo já pronto, beleza?

Dito isso, vamos começar da forma de sempre, abrindo o terminal e utilizando o comando de criação de um novo projeto, que chamaremos de ‘dark’:

flutter create dark

A estrutura das pastas será a de sempre:

Enquanto que o código do arquivo main.dart será o código abaixo. Lembrando que removi os comentários que vem por padrão nele, para deixar o código mais legível!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

O resultado no emulador será o seguinte:

Implementando a primeira forma

A primeira forma que irei mostrar é mais simples, porque vai funcionar juntamente com o Dark Mode interno do celular. Ou seja, só irá funcionar com celulares android que tenham a função Modo Escuro nativamente. Isso varia de versão para versão, dependendo da marca do celular. Por exemplo, nos IPhones o modo escuro só chegou a partir do iOS 13.

A implementação é bem simples. No início do código dentro do ‘return MaterialApp’ vamos adicionar o seguinte trecho de código:

Theme: ThemeData.dark(),

Esse trecho deve ficar entre o ‘theme’ e o ‘home’, dessa forma:

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

Feita a alteração, salve. Você não verá nenhuma alteração no App caso o Dark Mode do dispositivo esteja desligado. Mas basta ativar o modo nas configurações e o resultado será o seguinte:

Implementando a segunda forma

Como nem todos os dispositivos Android contam com o Dark Mode nativo, uma alternativa é fazer seu App com Dark Mode nativo. Em outras palavras, a base de cores do seu App pode ser em tons de preto e cinza. Alguns Apps que você certamente conhece já trabalham dessa forma, como Spotify e Netflix. Para fazer isso não é necessário que você saia pintando widget por widget, background color por background color… Há uma forma mais otimizada de lidar com isso.

Vamos voltar ao código base sem modificações que apresentei no começo do artigo. A partir dele iremos continuar com essa segunda forma.

Adicione o trecho de código abaixo. Eu adicionei o accentColor para deixar o botão branco, para combinar mais com o modo escuro.

brightness: Brightness.dark,
accentColor: Colors.whit

Esse código vai ficar dentro do ThemeData, dessa forma:

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,
        accentColor: Colors.white,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

O resultado no App com esse código será esse:

Finalizando

É importante deixar claro que basta usar um dos modos que eu expliquei. Não use os dois modos juntos, do contrário é possível que gere algum bug visual quando o Dark Mode for ativado em algum dispositivo se seu App já estiver com o app no estilo Dark Mode.

Em resumo é isso, é super simples de se fazer e é algo que vai ser bastante útil para todos, fora que é um atrativo a mais para o usuário. Eu, particulamente, dou preferência por Apps com Dark Mode.

Na documentação oficial do Flutter você encontra mais alguns detalhes sobre temas. Bons estudos!