Milliseid kohandamisvõimalusi pakub Flutter…

Disain, mis sobib töölauale, Flutter pakub järgmisi võimalusi:

LayoutBuilder: võimaldab luua erinevaid vidinaid sõltuvalt vanemvidina praegustest mõõtmetest.

// LayoutBuilder näide
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Suur ekraan'));
    } else {
      return Center(child: Text('Väike ekraan'));
    }
  },
)

MediaQuery: annab juurdepääsu ekraani suuruse ja orientatsiooni teabele, et luua kohandatud paigutusi.

// MediaQuery näide
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Lai ekraan
} else {
  // Kitsas ekraan
}

Kohandatud paigutuse vidinad: Flutter pakub vidinaid, mis on loomult kohandatavad, näiteks ListView, GridView, CustomScrollView, ExpansionTile ja teised.

// Kohandatud seadistustega GridView näide
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible ja Expanded: kasutatakse kohandatud paigutuste loomiseks Row ja Column sees, võimaldades vidinatel võtta kasutusele saadaval oleva ruumi proportsionaalselt või fikseeritud suurusega.

// Flexible ja Expanded näide
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // võtab 2/3 saadaval olevast ruumist
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // võtab 1/3 ruumist (aga mitte vähem kui oma minWidth)
      child: Container(color: Colors.blue),
    ),
  ],
)

Kohandatud Material Design komponendid: Flutteri Material Design vidinad sageli sisaldavad sisseehitatud kohandamist erinevatele vormifaktoritele.

// Navigation näide Draweriga
Scaffold(
  appBar: AppBar(title: Text('Rakendus')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Menüü'),
        ),
        ListTile(
          title: Text('Punkt 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Sisu')),
)

Breakpoints: ekraani laiuse põhjal erinevate paigutuste vahetamise määratlemine. Seda tehakse sageli MediaQuery või LayoutBuilder abil.

// Breakpoints näide
if (MediaQuery.of(context).size.width < 600) {
  // Mobiilne paigutus
} else if (MediaQuery.of(context).size.width < 1200) {
  // Tahvelarvuti paigutus
} else {
  // Töölaua paigutus
}

Kerimise käitumise seadistamine: võimalus konfigureerida kerimise käitumist töölaual (näiteks hiirrattaga kerimine).

// Kerimise käitumise näide
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Rakendamine:

// ListView-le rakendamine
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Need võimalused võimaldavad luua ühtse koodibaasi töölaua rakenduste jaoks, mis kohandub erinevate akna suuruste ja seadmetega.

Milliseid kohandamisvõimalusi pakub Flutter lauaarvutirakenduste arendamiseks?