Artikel ini akan membahas cara membuat aplikasi Flutter yang dapat beradaptasi dengan berbagai layar dan orientasi. Artikel ini akan berguna bagi pemula dan pengguna Flutter berpengalaman. Yang pertama akan menemukan templat untuk dipelajari, yang terakhir akan melihat masalah itu lagi.
Pernyataan masalah atau masalah tata letak adaptif
" Lakukan apa yang kamu suka ." Berdebar
Kedengarannya seperti motivator yang diperkaya secara spiritual, tetapi ini adalah pandangan sebenarnya dari pengembang kerangka kerja tentang masalah ini. Flutter tidak memiliki satu solusi, "berhasil", di sini pengembang memiliki kebebasan penuh dan kemampuan untuk memilih cara untuk memecahkan masalah ini (pada saat yang sama dan mengumpulkan penggaruk sepanjang jalan).
Saat ini Flutter mendukung platform seluler (Android, iOS), Web (dalam saluran beta), jarang digunakan untuk desktop. Artinya, aplikasi harus mendukung berbagai orientasi dan resolusi layar perangkat. Selain itu, perangkat seluler (jika tidak persegi) dapat diputar oleh pengguna ke orientasi potret atau lanskap. Pengguna perangkat seluler menyukai dan tahu bagaimana melakukan ini saat aplikasi berjalan untuk melihat konten layar secara lebih rinci. Jadi, agar tidak membuat pengguna frustasi, kita harus mengatasi masalah rotasi layar saat aplikasi sedang berjalan.
Dan dengan semua ini, diinginkan agar aplikasi berfungsi, menampilkan informasi tentang aktivitas vitalnya, terlepas dari karakteristik dan parameter perangkat yang membawanya, dan tindakan apa yang dapat dilakukan pengguna dengannya.
«, ».
, . Flutter- — , .
- UX , . , FAB (floating action button in material design) , , , — , , .
. , . , , .
Android
. Android (responsive) . : Responsive UI - Layout ( ), Support different screen sizes.
? , , . , ( ) .
, . — master/detail flow Android Studio. , in android way.
, . BDD.
, :
( dpi ).
( landscape — , , portrait — , ).
Android Studio landscape, portrait, , .
.
.
, , / .
.
, , , :
: https://pub.dev/packages/sizer_mod
example: https://github.com/NickZt/sizer_mod/tree/master/example
. MaterialApp dpi :
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) {
SizerUtil().init(constraints, orientation);
return MaterialApp(
example lib\main.dart
1.
. sizer .
, SizerUtil.orientation . :
appBar: AppBar(
title: SizerUtil.orientation == Orientation.portrait
? const Text('portrait')
: const Text('landscape'),
),
AppBar . example lib\screens\home_screen.dart
.
1 , : «1. ( dpi )».
2.
() ResponsiveWidget. () /. ( default xml in android) landscapeLargeScreen. / , . :
landscapeMediumScreen
landscapeSmallScreen
portraitMediumScreen
portraitSmallScreen
portraitLargeScreen
WelcomePage landscape , portrait , :
body: ResponsiveWidget(
landscapeLargeScreen: WelcomePage(
pageIndex: 0,
scrollDirection: Axis.vertical,
children: listOfPages,
),
portraitLargeScreen: WelcomePage(
pageIndex: 0,
scrollDirection: Axis.horizontal,
children: listOfPages,
),
),
:
https://github.com/NickZt/sizer_mod/raw/master/example/images/portrait_land_mob.gif
https://github.com/NickZt/sizer_mod/raw/master/example/images/portrait_mob.gif
, . , .
? . .
, 2 7 , :
2. ( landscape — , , portrait — , ).
3. Android Studio landscape, portrait, , .
4. .
5. .
6. , / .
7. .
, 3- . , .
( :)) .
, , . , . , Android. Figma.
, , , , :
: https://pub.dev/packages/sizer_mod
Git : https://github.com/NickZt/sizer_mod
— example: https://github.com/NickZt/sizer_mod/tree/master/example
Responsive UI - Layout
Support different screen sizes
Floating action button in material design
Cross-platform guidelines
Desktop and tablet navigation
Flutter Web: Getting started with Responsive Design
Develop A Responsive Layout Of Mobile App With Flutter