Kokias adaptacijos galimybes siūlo Flutter…

Dizaino, kuris tinka darbalapiui, Flutter siūlo šias galimybes:

LayoutBuilder: Leidžia kurti įvairius widget'us priklausomai nuo tėvų widget'o dabartinių matmenų.

// LayoutBuilder pavyzdys
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Didelis ekranas'));
    } else {
      return Center(child: Text('Mažas ekranas'));
    }
  },
)

MediaQuery: Suteikia prieigą prie informacijos apie ekrano dydį ir orientaciją, kad būtų galima kurti adaptuotus maketus.

// MediaQuery pavyzdys
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Platus ekranas
} else {
  // Siauras ekranas
}

Adaptuojami maketai su widget'ais: Flutter siūlo widget'us, kurie yra natūraliai adaptuojami, pvz., ListView, GridView, CustomScrollView, ExpansionTile ir kt.

// GridView su adaptuojamomis nustatymais pavyzdys
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible ir Expanded: Naudojami kuriant adaptuojamus maketus Row ir Column viduje, leidžia widget'ams užimti prieinamą erdvę proporcingai arba fiksuotu dydžiu.

// Flexible ir Expanded pavyzdys
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // Užima 2/3 prieinamos erdvės
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // Užima 1/3 erdvės (bet ne mažiau nei savo minWidth)
      child: Container(color: Colors.blue),
    ),
  ],
)

Material Design adaptuojami komponentai: Flutter Material Design widget'ai dažnai turi įmontuotą adaptaciją įvairiems formų faktoriams.

// Drawer pavyzdys navigacijai
Scaffold(
  appBar: AppBar(title: Text('Programėlė')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Meniu'),
        ),
        ListTile(
          title: Text('Punktas 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Turinys')),
)

Breakpoints: Nustatymas taškų, kur galima perjungti skirtingus maketus pagal ekrano plotį. Dažnai tai daroma naudojant MediaQuery arba LayoutBuilder.

// Breakpoints pavyzdys
if (MediaQuery.of(context).size.width < 600) {
  // Mobilus maketas
} else if (MediaQuery.of(context).size.width < 1200) {
  // Planšetės maketas
} else {
  // Darbalapio maketas
}

Slinkties elgesio nustatymai: Galimybė konfigūruoti slinkties elgesį darbalapyje (pvz., pelės ratuko palaikymas).

// Slinkties elgesio nustatymo pavyzdys
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Taikymas:

// Naudojant ListView
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Šios galimybės leidžia kurti vieningą kodų bazę darbalapių programoms, kurios prisitaiko prie skirtingų lango dydžių ir įrenginių.

Kokias adaptacijos galimybes siūlo Flutter darbalaukio programų kūrimui?