Kādas pielāgošanas iespējas piedāvā Flutter…

Dizains, kas irderīgs darbvirsmas lietojumprogrammām, Flutter piedāvā šādas iespējas:

LayoutBuilder: ļauj būvēt dažādus widgetus atkarībā no vecāka widgeta pašreizējiem izmēriem.

// LayoutBuilder piemērs
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Liels ekrāns'));
    } else {
      return Center(child: Text('Mazs ekrāns'));
    }
  },
)

MediaQuery: nodrošina piekļuvi informācijai par ekrāna izmēru un orientāciju, lai izveidotu adaptīvas izkārtnes.

// MediaQuery piemērs
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Plašs ekrāns
} else {
  // Šaurs ekrāns
}

Adaptīvas izkārtnes ar widgetiem: Flutter piedāvā widgetus, kas ir dabīgi adaptīvi, piemēram, ListView, GridView, CustomScrollView, ExpansionTile un citi.

// GridView ar adaptīviem iestatījumiem piemērs
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible un Expanded: tiek izmantoti, lai izveidotu adaptīvas izkārtnes Row un Column iekšpusē, ļaujot widgetiem aizņemt pieejamo telpu proporcionāli vai ar fiksētu izmēru.

// Flexible un Expanded piemērs
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // aizņem 2/3 pieejamās telpas
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // aizņem 1/3 telpas (bet ne mazāk kā minWidth)
      child: Container(color: Colors.blue),
    ),
  ],
)

Material Design adaptīvie komponenti: Flutter Material Design widgetiem bieži ir iebūvēta adaptācija dažādiem formātiem.

// Navigācijas piemērs ar Drawer
Scaffold(
  appBar: AppBar(title: Text('Lietojumprogramma')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Izvēlne'),
        ),
        ListTile(
          title: Text('Vienums 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Saturs')),
)

Breakpoints: noteikt punktus, kurus pārslēgt starp dažādiem izkārtojumiem atkarībā no ekrāna platuma. Tas bieži tiek īstenots ar MediaQuery vai LayoutBuilder.

// Breakpoints piemērs
if (MediaQuery.of(context).size.width < 600) {
  // Mobilais izkārtojums
} else if (MediaQuery.of(context).size.width < 1200) {
  // Planšetdatora izkārtojums
} else {
  // Darbvirsmas izkārtojums
}

Skrullēšanas uzvedības konfigurācija: iespēja konfigurēt skrullēšanas uzvedību darbvirsmai (piemēram, peles ritenis).

// Skrullēšanas uzvedības konfigurācijas piemērs
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Piemērošana:

// Pielietojums ar ListView
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Šīs iespējas ļauj izveidot vienotu koda bāzi darbvirsmas lietojumprogrammām, kas pielāgojas dažādiem loga izmēriem un ierīcēm.

Kādas pielāgošanas iespējas piedāvā Flutter darbvirsmas lietojumprogrammu izstrādei?