Layout responsive in Flutter con LayoutBuilder

LayoutBuilder in Flutter ci permette di creare un layout che dipende dalla dimensione del parent.

Usandolo possiamo facilmente ottenere dei layout responsive.

In questo articolo ne vediamo un paio di esempi.

Cominciamo da uno easy:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        return SizedBox(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          child: const Center(
            child: Text('CIAO'),
          ),
        );
      }),
    );
  }
}

Qui in pratica avremo un testo sempre centrato che occupa la quantità massima disponibile.

Se fate delle prove da pc, potete ridimensionare la finestra per visualizzare l'effetto.

Volendo possiamo creare dei layout più complessi.

Ad esempio usare una singola colonna fino a determinate dimensioni della finestra, per poi passare ad un layout con più colonne:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        return Column(
          children: [
            const Text('HEADER'),
            const SizedBox(
              height: 10,
            ),
            constraints.maxWidth < 600
                ? const Column(
                    children: [
                      Text('UNO'),
                      Text('DUE'),
                      Text('TRE'),
                    ],
                  )
                : const Row(
                    children: [
                      Expanded(child: Text('RIGA UNO')),
                      Expanded(child: Text('RIGA DUE')),
                      Expanded(child: Text('RIGA TRE')),
                    ],
                  ),
            const SizedBox(
              height: 10,
            ),
            const Text('FOOTER'),
          ],
        );
      }),
    );
  }
}

Anche qui, come sopra, se fate delle prove da pc vi accorgerete di come cambia il layout in base al ridimensionamento.

Vi sembrerà di stare in un sito responsive.

Enjoy!