flutter pub add screentasia根據套件公開資料產生的選型評估，僅供參考。
Screentasia 是一個 Flutter 套件，專為簡化跨所有螢幕尺寸與平台的響應式、自適應 UI 建立而設計。它提供可擴展佈局、動態字型與一致間距的工具，確保設計在 Android、iOS、Web、macOS、Windows 與 Linux 上皆呈現精緻外觀。內建工具可處理不同螢幕密度與方向，減少重複程式碼，並簡化響應式開發。非常適合需要像素級適應性，同時不犧牲可維護性的應用。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
✨ Give a star for the Repo ✨A Flutter package that helps you create beautifully adaptive designs for all screens with a wealth of features.
Please check the latest version before installation.
If there is any problem with the new version, please use the previous version
dependencies:
flutter:
sdk: flutter
# add screentasia
screentasia: ^{latest version}
import 'package:screentasia/screentasia.dart';
| Property | Type | Default Value | Description |
|---|---|---|---|
| adaptiveFrom | double | adaptiveFrom . mobile | Used to adapt sizes from chosen screen ex: if 500 width on a desktop is equal to 50% of the screen width, will be equal to 50% to all screens,also you can use custom screen with customScreen method |
| adaptivePercentage | AdaptivePercentage | AdaptivePercentage(mobile: 100, tablet: 100, desktop: 100) | For adaptive percentage in different screens, also can disable adaptive for specific screens with 0 value as parameter |
| builder | Function | null | Return widget that uses the library in a property (ex: MaterialApp's theme) |
| child | Widget | null | A part of the builder that its dependencies/properties don't use the library |
| rebuildFactor | Function | default | Returns whether to rebuild or not when screen metrics change. |
Note : You must either provide builder, child or both.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreentasiaInit(
adaptiveFrom: AdaptiveFrom.mobile, //optional for custom screen ex: customScreen(400,700)
adaptivePercentage: AdaptivePercentage(mobile:100,tablet:100,desktop:100),//optional
builder: (context , child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Example',
home: child,
);
},
child: const HomePage(title: 'Example'),
);
}
}
We can create adaptive value for (width,height,font,etc) based on value in specific device for example (Mobile,Tablet,Desktop) or specific device dimension ( width,height )
to apply adaptive value for all screen
ex: 250.w '250 width in mobile screen'
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreentasiaInit(
adaptiveFrom: AdaptiveFrom.mobile,
adaptivePercentage:
const AdaptivePercentage(mobile: 100, desktop: 100, tablet: 100),
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter screentasia',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter screentasia Demo Page'),
),
body: Container(
color: Colors.blue,
width: 250.w,
)));
},
);
}
}
We can create adaptive value for (width,height, font,etc) based on percentage
for example we will use width percentage 'wb' in diffrent screen sizes
ex: 50wp '50 width percent in screen'
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreentasiaInit(
adaptiveFrom: AdaptiveFrom.mobile,
adaptivePercentage:
const AdaptivePercentage(mobile: 100, desktop: 100, tablet: 100),
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter screentasia',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter screentasia Demo Page'),
),
body: Container(
color: Colors.blue,
width: 50.wp,
)));
},
);
}
}
We can create adaptive value for (width, height, font, etc) based on percentage
for example, we will use width percentage 'wb' in different screen sizes with different value percentages in specific screens
ex: 100wp '100 width per cent from Desktop Screen'
50wp '50 width per cent from Tablet Screen'
25wp '25 width per cent from Mobile Screen'
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreentasiaInit(
adaptiveFrom: AdaptiveFrom.mobile,
adaptivePercentage:
const AdaptivePercentage(mobile: 100, desktop: 100, tablet: 100),
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter screentasia',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter screentasia Demo Page'),
),
body: Container(
color: Colors.blue,
width: 100.wp.ap(
adaptivePercentage: const AdaptivePercentage(
desktop: 100, tablet: 50, mobile: 25)))));
},
);
}
}
Screentasia().setWidth(540) (dart sdk>=2.6 ) another way (540.w) //Adapted to screen width
Screentasia().setHeight(200) (dart sdk>=2.6 ) another way (200.h) //Adapted to screen height, under normal circumstances, the height still uses x.w
Screentasia().radius(200) (dart sdk>=2.6 ) another way (200.r) //Adapt according to the smaller of width or height
Screentasia().setSp(24) (dart sdk>=2.6 ) another way (24.sp) //Adapter font
Screentasia().setPercentage(MediaQuery.sizeOf(context).width,50) (dart sdk>=2.6 : 50.wp) //Device width in Percentage, You can use Height just replace MediaQuery.sizeOf(context).width with MediaQuery.sizeOf(context).height
EdgeInsets.all(10).w //EdgeInsets.all(10.w)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
Radius.circular(16).w //Radius.circular(16.w)
BorderRadius.all(Radius.circular(16)).w
ap(tablet:50) //adaptive percentage, tablet 50 means that adaptive percentage 50% only on tablet screens, the default is 100% for all screens
暫無相關資料。