Ce capacități de adaptabilitate oferă Flutter pentru…

Pentru designul adaptiv pe desktop, Flutter oferă următoarele posibilități:

LayoutBuilder: Permite construirea diferitelor widget-uri în funcție de dimensiunile curente ale widget-ului părinte.

// Exemplu LayoutBuilder
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Ecran mare'));
    } else {
      return Center(child: Text('Ecran mic'));
    }
  },
)

MediaQuery: Oferă acces la informații despre dimensiunea ecranului și orientarea dispozitivului pentru crearea de layout-uri adaptabile.

// Exemplu MediaQuery
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Layout pentru ecran lat
} else {
  // Layout pentru ecran îngust
}

Widget-uri pentru layout adaptiv: Flutter oferă widget-uri care sunt în mod natural adaptabile, cum ar fi ListView, GridView, CustomScrollView, ExpansionTile etc.

// Exemplu GridView cu setări adaptive
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible și Expanded: Sunt folosite pentru crearea de layout-uri adaptive în interiorul Row și Column, permițând widget-urilor să ocupe spațiul disponibil proporțional sau cu dimensiuni fixe.

// Exemplu Flexible și Expanded
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // Ocupă 2/3 din spațiul disponibil
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // Ocupă 1/3 din spațiul disponibil (dar nu mai mic decât minWidth-ul său)
      child: Container(color: Colors.blue),
    ),
  ],
)

Componente adaptabile Material Design: Widget-urile Material Design din Flutter au adesea suport încorporat pentru adaptabilitate pentru diferite formate.

// Exemplu Drawer pentru navigare
Scaffold(
  appBar: AppBar(title: Text('Aplicație')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Meniu'),
        ),
        ListTile(
          title: Text('Punctul 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Conținut')),
)

Breakpoints: Definirea punctelor de întrerupere (breakpoints) pentru a comuta între diferite layout-uri în funcție de lățimea ecranului. Acest lucru se realizează adesea cu MediaQuery sau LayoutBuilder.

// Exemplu de utilizare a breakpoints
if (MediaQuery.of(context).size.width < 600) {
  // Layout mobil
} else if (MediaQuery.of(context).size.width < 1200) {
  // Layout pentru tabletă
} else {
  // Layout pentru desktop
}

Configurarea comportamentului de derulare: Posibilitatea de a personaliza comportamentul de derulare pentru desktop (de exemplu, suport pentru rotița mouse-ului).

// Exemplu de configurare ScrollBehavior
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Aplicare:

// Aplicare la ListView
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Aceste posibilități permit crearea unei baze de cod unice pentru aplicațiile desktop, care se adaptează la diferite dimensiuni ale ferestrelor și dispozitivelor.

Ce capacități de adaptabilitate oferă Flutter pentru dezvoltarea aplicațiilor desktop?