在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Codelessly/ResponsiveFramework开源软件地址:https://github.com/Codelessly/ResponsiveFramework开源编程语言:Dart 100.0%开源软件介绍:Responsive Framework
Responsive Framework adapts your UI to different screen sizes automatically. Create your UI once and have it display pixel perfect on mobile, tablet, and desktop! The ProblemSupporting multiple display sizes often means recreating the same layout multiple times. Under the traditional Bootstrap approach, building responsive UI is time consuming, frustrating and repetitive. Furthermore, getting everything pixel perfect is near impossible and simple edits take hours. The SolutionUse Responsive Framework to automatically scale your UI.
DemoMinimal WebsiteA demo website built with the Responsive Framework. View Code Flutter WebsiteThe flutter.dev website recreated in Flutter. View Code Pub.dev WebsiteThe pub.dev website recreated in Flutter. View Code Quick StartImport this library into your project: responsive_framework: ^latest_version Add import 'package:responsive_framework/responsive_framework.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) => ResponsiveWrapper.builder(
child,
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
],
background: Container(color: Color(0xFFF5F5F5))),
initialRoute: "/",
);
}
} That's it! AutoScaleAutoScale shrinks and expands your layout proportionally, preserving the exact look of your UI. This eliminates the need to manually adapt layouts to mobile, tablet, and desktop. ResponsiveBreakpoint.autoScale(600); Flutter's default behavior is resize which Responsive Framework respects. AutoScale is off by default and can be enabled at breakpoints by setting BreakpointsBreakpoints control responsive behavior at different screen sizes. ResponsiveWrapper(
child,
breakpoints: [
ResponsiveBreakpoint.resize(600, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.autoScale(1200, name: DESKTOP),
],
) Breakpoints give you fine-grained control over how your UI displays. Introductory ConceptsThese concepts helps you start using the Responsive Framework and build an responsive app quickly. Scale vs ResizeFlutter's default behavior is to resize your layout when the screen dimensions change. Resizing a layout stretches it in the direction of an unconstrained width or height. Any constrained dimension stays fixed which is why mobile app UIs look tiny on desktop. The following example illustrates the difference between resizing and scaling. An AppBar widget looks correct on a phone. When viewed on a desktop however, the AppBar is too short and the title looks too small. Here is what happens under each behavior:
When scaled, the AppBar looks correct on desktop, up to a certain size. Once the screen becomes too wide, the AppBar starts to appear too large. This is where breakpoints come in. Breakpoint ConfigurationTo adapt to a wide variety of screen sizes, set breakpoints to control responsive behavior. ResponsiveWrapper(
child,
maxWidth: 1200,
minWidth: 480,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(480, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.resize(1000, name: DESKTOP),
ResponsiveBreakpoint.autoScale(2460, name: '4K'),
],
) An arbitrary number of breakpoints can be set. Resizing/scaling behavior can be mixed and matched.
Additional ResourcesResocoder TutorialThe wonderful people at Resocoder created a great tutorial video and article walking through the usage of the Responsive Framework at the link below. View Responsive Framework Tutorial Project WikiNo project wiki exists yet unfortunately. That means this is an opportunity for you to create and maintain the wiki for one of the most popular Flutter packages. This package needs your help with documentation! Please reach out via the contact links below if you are interested. AboutResponsive Framework was created out of a desire for a better way to manage responsiveness. The ability to automatically adapt UI to different sizes opens up a world of possibilities. Here at Codelessly, we're building a Flutter app UI and website builder, development tools, and UI templates to increase productivity. If that sounds interesting, you'll want to subscribe to updates below |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论