Forked from gazialankus/figma_compatibility_scaffold.dart
Created
September 6, 2025 12:25
-
-
Save musahinist/57f1418c80d3a260c90c12b020f77b7a to your computer and use it in GitHub Desktop.
Scales the whole screen in the scaffold so you work with Figma's units and enjoy const widgets at the same time
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| class FigmaCompatibilityForBottomSheet extends StatelessWidget { | |
| const FigmaCompatibilityForBottomSheet({required this.child, super.key}); | |
| final Widget child; | |
| @override | |
| Widget build(BuildContext context) { | |
| final mq = MediaQuery.of(context); | |
| final deviceWidth = mq.size.width; | |
| // const deviceWidth = 392.7; // common value for Android | |
| const figmaWidth = 375; | |
| final ratio = figmaWidth / deviceWidth; | |
| return SizedBox( | |
| width: double.infinity, | |
| child: IntrinsicHeight( | |
| child: FractionallySizedBox( | |
| widthFactor: ratio, | |
| heightFactor: ratio, | |
| child: Transform.scale( | |
| scale: 1 / ratio, | |
| child: child, | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class FigmaCompatibilityScaffold extends StatelessWidget { | |
| const FigmaCompatibilityScaffold({ | |
| required this.body, | |
| this.appBar, | |
| this.bottomNavigationBar, | |
| this.floatingActionButton, | |
| this.extendBodyBehindAppBar, | |
| this.backgroundColor, | |
| super.key, | |
| }); | |
| final Widget body; | |
| final AppBar? appBar; | |
| final Widget? bottomNavigationBar; | |
| final FloatingActionButton? floatingActionButton; | |
| final bool? extendBodyBehindAppBar; | |
| final Color? backgroundColor; | |
| static const showThemeFabIfNoFab = false; | |
| @override | |
| Widget build(BuildContext context) { | |
| final mq = MediaQuery.of(context); | |
| final deviceWidth = mq.size.width; | |
| // const deviceWidth = 392.7; // common value for Android | |
| const figmaWidth = 375; | |
| final ratio = figmaWidth / deviceWidth; | |
| return FractionallySizedBox( | |
| widthFactor: ratio, | |
| heightFactor: ratio, | |
| child: Transform.scale( | |
| scale: 1 / ratio, | |
| child: MediaQuery( | |
| data: mq.copyWith( | |
| viewInsets: mq.viewInsets.copyWith( | |
| bottom: mq.viewInsets.bottom * ratio, | |
| ), | |
| ), | |
| child: Scaffold( | |
| body: body, | |
| appBar: appBar, | |
| bottomNavigationBar: bottomNavigationBar, | |
| floatingActionButton: floatingActionButton, | |
| extendBodyBehindAppBar: extendBodyBehindAppBar ?? false, | |
| backgroundColor: backgroundColor, | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment