Que capacidades de adaptabilidade o Flutter oferece…

Para o design adaptativo no desktop, o Flutter oferece as seguintes capacidades:

LayoutBuilder: Permite construir diferentes widgets dependendo das dimensões atuais do widget pai.

// Exemplo de LayoutBuilder
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Ecrã grande'));
    } else {
      return Center(child: Text('Ecrã pequeno'));
    }
  },
)

MediaQuery: Fornece acesso às informações sobre o tamanho da tela e orientação do dispositivo para criar layouts adaptativos.

// Exemplo de MediaQuery
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Layout para ecrã largo
} else {
  // Layout para ecrã estreito
}

Widgets para layout adaptativo: Flutter oferece widgets que são inerentemente adaptativos, como ListView, GridView, CustomScrollView, ExpansionTile, etc.

// Exemplo de GridView com configurações adaptativas
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible e Expanded: São usados para criar layouts adaptativos dentro de Row e Column, permitindo que os widgets ocupem o espaço disponível proporcionalmente ou com tamanhos fixos.

// Exemplo de Flexible e Expanded
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // Ocupa 2/3 do espaço disponível
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // Ocupa 1/3 do espaço disponível (mas não menos que seu minWidth)
      child: Container(color: Colors.blue),
    ),
  ],
)

Componentes Material Design adaptativos: Os widgets Material Design no Flutter frequentemente têm adaptabilidade incorporada para diferentes formatos.

// Exemplo de Drawer para navegação
Scaffold(
  appBar: AppBar(title: Text('Aplicação')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Item 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Conteúdo')),
)

Breakpoints: Definição de pontos de interrupção para alternar entre diferentes layouts com base na largura da tela, frequentemente usando MediaQuery ou LayoutBuilder.

// Exemplo de uso de breakpoints
if (MediaQuery.of(context).size.width < 600) {
  // Layout móvel
} else if (MediaQuery.of(context).size.width < 1200) {
  // Layout para tablet
} else {
  // Layout para desktop
}

Configuração do comportamento de scroll: Permite personalizar o comportamento de scroll para desktop (por exemplo, suporte para roda do mouse).

// Exemplo de configuração de ScrollBehavior
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Aplicação:

// Aplicando ao ListView
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Essas capacidades permitem criar uma base de código unificada para aplicações de desktop que se adaptam a diferentes tamanhos de janelas e dispositivos.

Que capacidades de adaptabilidade o Flutter oferece para o desenvolvimento de aplicações de desktop?