Conheça seus Widgets MaterialApp — O widget para a funcionalidade Material Design no Flutter

Publicado em por
Tempo de leitura: 6 minutes

Este artigo fala sobre o widget MaterialApp (classe). O MaterialApp é a base para o design de materiais. Ele fornece muitos benefícios que afetam toda a subárvore do widget.

 

MaterialApp: Introdução

MaterialApp é um widget integrado (classe) do framework Flutter. Integrado significa que o widget MaterialApp estará disponível assim que você instalar o Flutter. É um dos principais componentes do Flutter.

O MaterialApp é um widget de comodidade, pois fornece muitos recursos necessários para o desenvolvimento de aplicativos móveis. A principal responsabilidade do MaterialApp é abstrair requisitos de funcionalidade difíceis, mas gerais, de um aplicativo. Esses requisitos de funcionalidade incluem a configuração de um navegador e um tema para todo o aplicativo. No entanto, o MaterialApp não é assertivo; ou seja, não determina a aparência da interface do usuário (IU) do seu aplicativo. Isso significa que o MaterialApp não presume nada sobre — configuração padrão, tema do aplicativo e, portanto, é totalmente personalizável.

O MaterialApp adiciona funcionalidade específica do Material Design e opções de estilo ao aplicativo que você está desenvolvendo. Outro exemplo de comodidade fornecido pelo MaterialApp — ele implementa as animações que ocorrem quando o usuário do aplicativo navega em diferentes telas. Portanto, você como desenvolvedor não precisa se preocupar em implementar animações de navegação de página. Ele também configura seu aplicativo para usar widgets Flutter que são específicos do Material Design.

 

Por que se chama MaterialApp

MaterialApp é um widget necessário para aplicativos que usam design de material. Ele envolve todos os outros widgets usados em um aplicativo Flutter. Portanto, pode-se dizer que, para aplicativos de design de material, o widget MaterialApp é um gateway para acessar (usar) outros widgets do Flutter SDK, como widget Scaffold, widget AppBar, widget TextField, widget Drawer, widget IconButton, widget DropdownButton, ThemeData widget, etc

Normalmente, o andaime é passado para a propriedade inicial de, MaterialApp,​ i. e. O widget Scaffold é filho direto do MaterialApp; desde o widget Scaffold usado para implementar o layout visual de design de material básico de um aplicativo. O Scaffold é o widget que facilita a criação de aplicativos Flutter funcionais e responsivos. Portanto, você pode dizer que o widget MaterialApp usa o widget Scaffold para conter todos os outros widgets necessários para um aplicativo. Se ficar confuso, não se preocupe, leia a próxima seção.

É chamado de aplicativo Material, pois implementa as diretrizes de design de materiais do Google. Por exemplo, as animações de página (sobre as quais falei anteriormente) são projetadas à medida que ocorrem em um dispositivo Android, pois os dispositivos Android também são baseados nas diretrizes de design do Material Design. No entanto, isso não será uma preocupação se você estiver desenvolvendo um aplicativo que segue um sistema de design que não é semelhante (semelhante) ao design do Material, pois o MaterialApp é totalmente personalizável, ou seja, as animações de roteamento (página) podem ser substituídas e você não precisa use apenas widgets de materiais (widget Scaffold, widget AppBar, widget TextField, widget Drawer, widget IconButton, widget DropdownButton etc.)

Vale a pena entender aqui que o widget MaterialApp é derivado de (ou uma extensão de) outro widget integrado chamado WidgetsApp.

 

Diferença entre MaterialApp e Scaffold

O MaterialApp informa o framework Flutter; o aplicativo usará o design de materiais. Uma vez que o framework flutter sabe desse fato, ele segue o design do Material e organiza todos os widgets de acordo. Para organização de todos os outros widgets, o framework Flutter usa o widget Scaffold como widget filho do MaterialApp, pois existem funcionalidades básicas que só podem ser fornecidas pelo widget Scaffold. O widget Scaffold é o filho direto do widget MaterialApp, pois está sendo passado para a propriedade inicial de MaterialApp. O widget Scaffold fornece o layout visual do aplicativo.

Propriedades do MaterialApp

Após uma introdução ao MaterialApp, é hora de focar nas diferentes propriedades do widget MaterialApp. Algumas das propriedades importantes e frequentemente usadas do MaterialApp são discutidas abaixo.

title
A propriedade title recebe uma String que descreve brevemente o aplicativo; ou seja, esta propriedade define o título do aplicativo. O título do aplicativo é exibido quando o usuário vê o botão de aplicativos recentes no dispositivo Android. Também funciona como a descrição de uma linha do aplicativo para o dispositivo. Na plataforma iOS este valor não pode ser utilizado.

Para a plataforma Web, é usado como o título da guia (janela).

thema
Essa propriedade decide o theme de material padrão do aplicativo, como a cor do tema. É necessário um objeto ThemeData para descrever o tema.
O widget ThemeData tem propriedades diferentes, como primarySwatch, TextTheme, Brightness, etc., para descrever o tema. O primarySwatch define a cor do tema padrão do aplicativo. O valor da cor (constante) é passado pela classe Colors.

color
Esta propriedade define o primary color do aplicativo na interface do sistema operacional.

home
A propriedade home define a rota padrão (página) do aplicativo. O widget passado para a propriedade home é o primeiro a ser exibido quando o aplicativo começa a funcionar normalmente. Principalmente, o widget Scaffold é atribuído à propriedade home. O widget Scaffold também possui propriedades como appBar, body, floatingActionButton, backgroundColor, etc.

 

Exemplo de programa

O fragmento de código abaixo cria um aplicativo usando o widget MaterialApp.

O pacote abaixo é importado para implementar o Material Design.

import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialAppExample());
}
class MaterialAppExample extends StatelessWidget {
  const MaterialAppExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    /*
      The build method of MyApp returns the MaterialApp (widget)
      as the top-level widget of this app.
     */
    return MaterialApp(
      title: 'Material App example',
      // primary theme of the app
      theme: ThemeData(primarySwatch: Colors.blue),
        // for dark theme of the app, if dark theme used
      darkTheme: ThemeData(primarySwatch: Colors.grey),
      color: Colors.blueAccent,
      home: Scaffold(
        appBar: AppBar(
            title: const Text('What is Material App'),
        ),
        body: const Text('This app explains MaterialApp widget which is used to implement material design guidelines'),
      ),
    );
  }
}

A saída do programa (aplicativo) acima é mostrada na imagem abaixo.

O programa acima implementa diretrizes de design de material por meio do MaterialApp. O código acima usa a propriedade de tema de MaterialApp para decidir o theme do aplicativo. Pode haver várias propriedades de tema, mas aqui apenas a propriedade primarySwatch está definida para a cor azul e seu efeito pode ser visto na imagem de saída.

Alterar a linha de código theme: ThemeData(primarySwatch: Colors.blue), para theme: ThemeData(primarySwatch: Colors.red), mudará a cor do tema conforme mostrado na imagem abaixo.

A propriedade home do MaterialApp pode usar um widget definido pelo usuário.

Como alternativa, o código acima também pode ser escrito conforme mencionado abaixo. A diferença – o código abaixo usa outro widget AppHomePage definido pelo usuário como a propriedade home do MaterialApp. Aqui, AppHomePage retorna um widget Scaffold para criar o layout visual de material design da página, conforme explicado anteriormente. No entanto, para simplificar este artigo, o widget AppHomePage definido pelo usuário não implementa novas funcionalidades. Em vez disso, é codificado para produzir a mesma saída produzida pelo programa acima.

import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialAppExample());
}
class MaterialAppExample extends StatelessWidget {
  const MaterialAppExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    /*
      The build method of MyApp returns the MaterialApp (widget)
      as the top-level widget of this app.
     */
    return MaterialApp(
      title: 'Material App example',
      // primary theme of the app
      theme: ThemeData(primarySwatch: Colors.red),
      // for dark theme of the app, if dark theme used
      darkTheme: ThemeData(primarySwatch: Colors.grey),
      color: Colors.blueAccent,
      home: const AppHomePage(),
    );
  }
}
class AppHomePage extends StatelessWidget {
  const AppHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('What is Material App'),
      ),
      body: const Text( 'This app explains MaterialApp widget which is used to implement material design guidelines'),
    );
  }
}

 

Efeito da propriedade de color MaterialApp

A imagem abaixo descreve a utilidade da propriedade de color do MaterialApp. A linha de codecolor: Colors.blueAccent, define color como blueAccent. Em dispositivos Android, essa propriedade define a cor usada para o aplicativo no alternador de aplicativos (consulte color blueAccent do ícone Flutter na imagem abaixo).

 

Flutter para Web e propriedade title do MaterialApp

A propriedade title de MaterialApp define o título da guia (janela) do navegador para o Flutter for Web. Isso é representado na captura de tela abaixo.

 

Recapitular

O artigo forneceu uma breve introdução ao widget MaterialApp (classe) que facilita a criação de aplicativos baseados em design de material. Algumas propriedades básicas do widget MaterialApp são explicadas por meio de trechos de código de exemplo.

O MaterialApp é o ponto de acesso ao design de material na forma de um widget. Além disso, o MaterialApp configura o Navegador (top-level) para procurar (buscar) rotas em uma determinada ordem. Portanto, em colaboração com o widget Navigator, ele implementa o roteamento . Roteamento significa mover para outras telas, páginas em um aplicativo.

 
Twittar
Compartilhar
Compartilhar
0 Compart.