DEV: Spacing & Widgets

This commit is contained in:
2024-04-22 18:30:31 +02:00
parent 8d26230200
commit 081fa78486
13 changed files with 686 additions and 93 deletions

View File

@@ -0,0 +1,39 @@
import 'dart:ui';
import 'package:flutter/material.dart';
Widget astromicBlurEffect(
Widget child,
double sigmaX,
double sigmaY, {
Widget? topChild,
Color? overlayColor = const Color.fromRGBO(0, 0, 0, 0.1),
TileMode? tileMode = TileMode.mirror,
List<BoxShadow>? shadow,
BorderRadius? radius,
}) =>
Container(
decoration: BoxDecoration(
boxShadow: shadow,
),
child: ClipRRect(
borderRadius: radius ?? BorderRadius.zero,
child: Stack(
children: [
child,
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
tileMode: TileMode.mirror,
),
child: Container(
decoration: BoxDecoration(
color: overlayColor,
),
),
),
topChild ?? Container(),
],
),
),
);

View File

@@ -0,0 +1,217 @@
import 'dart:typed_data';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:octo_image/octo_image.dart';
import '../../../Infrastructure/transparent_image.dart';
Widget astromicImage(
BuildContext context, {
//S1 -- Asset
String? assetPath,
String? assetURL,
Uint8List? assetBytes,
String? assetFallback,
//
//S1 -- Sizing | Width
double? wFactor, // variable width ratio
double? minW, // Min width allowed
double? maxW, // Max width allowed
double? fixedWidth, // Only used when uisng height variables
//S1 -- Sizing | Width
bool useHeight = false, // use height constrains
double? hFactor, // Variable height ratio
double? minH, // Min Height allowed
double? maxH, // Max height allowed
double? fixedHeight, // Only used when using width variables
//S1 -- STYLING
bool circular = false,
double? border,
Color? borderColor,
EdgeInsetsGeometry? borderPadding,
BorderRadiusGeometry radius = BorderRadius.zero,
List<BoxShadow>? shadow,
//S1 -- SVG FILTERS
Color? color,
BlendMode? blend,
//S1 -- CONFIGS
BoxFit fit = BoxFit.cover,
Alignment alignment = Alignment.center,
LinearGradient? linearGradient,
//S1 -- STATE
Widget? loadingWidget,
Widget? errorWidget,
}) {
//
assert(minW == null || maxW == null, "Please specify only one width constrain");
assert(minH == null || maxH == null, "Please specify only one height constrain");
assert(!useHeight || (hFactor != null), "Please specify The height factor and constrains");
assert(
(assetPath != null && assetBytes == null && assetURL == null) ||
(assetPath == null && assetBytes != null && assetURL == null) ||
(assetPath == null && assetBytes == null && assetURL != null) ||
(assetFallback != null && assetFallback != ''),
"Please specify only one Asset Source");
//
//
bool fromPath = (assetPath != null && assetPath != '');
bool fromBytes = (assetBytes != null && assetBytes.isNotEmpty);
bool fromNetwork = (assetURL != null && assetURL != '' && Uri.tryParse(assetURL) != null);
//
String finalAssetKey = fromPath
? assetPath
: fromNetwork
? assetURL
: fromBytes
? assetBytes.length.toString()
: 'N/A';
//
bool isFallback = (assetBytes == null && assetURL == null && assetPath == null && assetFallback != null);
bool isSVG = fromPath
? assetPath.endsWith('.svg')
: fromNetwork
? assetURL.endsWith('.svg')
: isFallback
? assetFallback.endsWith('.svg')
: false;
//
double h = MediaQuery.of(context).size.height;
double? fh = hFactor != null ? hFactor * h : null;
double w = MediaQuery.of(context).size.width;
double? fw = wFactor != null ? wFactor * w : null;
//
double? finalW = useHeight
? fixedWidth
: fw != null
? fw > (maxW ?? double.infinity)
? maxW
: fw < (minW ?? 0)
? minW
: fw
: null;
double? finalH = !useHeight
? fixedHeight
: fh != null
? fh > (maxH ?? double.infinity)
? maxH
: fh < (minH ?? 0)
? minH
: fh
: null;
//
Widget finalError = errorWidget ??
const Center(
child: Text("Error has happened.."),
);
//
Widget finalLoading = loadingWidget ?? Container();
//
ImageProvider finalImageProvider = isFallback
? AssetImage(
assetFallback,
)
: fromPath
? AssetImage(
assetPath,
)
: fromBytes
? MemoryImage(assetBytes)
: fromNetwork
? CachedNetworkImageProvider(
assetURL,
cacheKey: assetURL,
)
: MemoryImage(kTransparentImage) as ImageProvider;
//
Widget? finalSVGWidget = fromPath
? SvgPicture.asset(
assetPath,
key: ValueKey(assetPath),
width: finalW,
height: finalH,
fit: fit,
placeholderBuilder: (_) => SizedBox(
width: finalW,
height: finalH,
child: finalLoading,
),
alignment: alignment,
colorFilter: color != null ? ColorFilter.mode(color, blend ?? BlendMode.srcATop) : null,
)
: fromNetwork
? SvgPicture.network(
assetURL,
key: ValueKey(assetURL),
width: finalW,
height: finalH,
fit: fit,
placeholderBuilder: (_) => SizedBox(
width: finalW,
height: finalH,
child: finalLoading,
),
alignment: alignment,
colorFilter: color != null ? ColorFilter.mode(color, blend ?? BlendMode.srcATop) : null,
)
: null;
//
return SizedBox(
width: finalW,
height: finalH,
child: Stack(
children: [
OctoImage(
key: ValueKey(finalAssetKey),
//
width: finalW,
height: finalH,
fit: fit,
alignment: alignment,
filterQuality: FilterQuality.none,
color: color,
colorBlendMode: blend ?? (isSVG ? BlendMode.srcATop : null),
//
errorBuilder: (context, error, stackTrace) {
return finalError;
},
//
progressIndicatorBuilder: (a, b) => SizedBox(
width: finalW,
height: finalH,
child: finalLoading,
),
imageBuilder: (context, image) => Container(
width: finalW,
height: finalH,
padding: borderPadding ?? EdgeInsets.zero,
margin: EdgeInsets.zero,
decoration: BoxDecoration(
border: border != null
? Border.all(
strokeAlign: BorderSide.strokeAlignInside,
width: border,
color: borderColor ?? const Color(0xff000000),
)
: null,
borderRadius: circular ? BorderRadius.circular(10000) : radius,
boxShadow: shadow,
),
child: ClipRRect(
borderRadius: circular ? BorderRadius.circular(10000) : radius,
child: isSVG ? finalSVGWidget : image,
),
),
image: isSVG ? MemoryImage(kTransparentImage) : finalImageProvider,
),
if (linearGradient != null)
Container(
decoration: BoxDecoration(gradient: linearGradient),
),
],
),
);
}

View File

@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';
//
Widget astromicScaffold({
//S1 -- AppBar
PreferredSizeWidget? appBar,
bool isAppbarStacked = false,
//S1 -- FAB
Widget? floatingActionButton,
FloatingActionButtonLocation? floatingActionButtonLocation,
//S1 -- Other Integral Components
Widget? drawer,
Widget? bottomNavigationBar,
Widget? bottomSheet,
//S1 -- Styling
Color? backgroundColor,
EdgeInsetsGeometry? padding,
ScrollPhysics? scrollPhysics = const BouncingScrollPhysics(),
//S1 -- Configs
bool withSafeArea = false,
bool extendBody = false,
bool resizeToAvoidBottomInset = true,
bool withScrollView = false,
bool closeKeyboardOnTap = true,
//
Widget? body,
//
}) {
assert(!withScrollView || (withScrollView && body is Column), 'Make sure you add a column in the body section!');
//
return Scaffold(
backgroundColor: backgroundColor,
//
appBar: isAppbarStacked ? null : appBar,
floatingActionButton: floatingActionButton,
floatingActionButtonLocation: floatingActionButtonLocation,
drawer: drawer,
bottomNavigationBar: bottomNavigationBar,
bottomSheet: bottomSheet,
//
resizeToAvoidBottomInset: resizeToAvoidBottomInset,
extendBody: extendBody,
body: Stack(
children: [
GestureDetector(
onTap: !withScrollView && closeKeyboardOnTap ? () => FocusManager.instance.primaryFocus?.unfocus() : null,
child: withSafeArea
? SafeArea(
child: withScrollView
? SingleChildScrollView(
keyboardDismissBehavior: closeKeyboardOnTap ? ScrollViewKeyboardDismissBehavior.onDrag : ScrollViewKeyboardDismissBehavior.manual,
physics: scrollPhysics,
padding: padding ?? EdgeInsets.zero,
child: body,
)
: Padding(
padding: padding ?? EdgeInsets.zero,
child: body,
),
)
: withScrollView
? SingleChildScrollView(
keyboardDismissBehavior: closeKeyboardOnTap ? ScrollViewKeyboardDismissBehavior.onDrag : ScrollViewKeyboardDismissBehavior.manual,
padding: padding ?? EdgeInsets.zero,
child: body,
)
: Padding(
padding: padding ?? EdgeInsets.zero,
child: body,
),
),
isAppbarStacked && appBar != null ? Wrap(children: [appBar]) : Container(),
],
),
);
}

View File

@@ -0,0 +1,157 @@
import 'dart:typed_data';
import 'dart:ui';
//s2 Core Packages Imports
import 'package:astromic_mobile_elements/src/Widgets/src/blur.widget.dart';
import 'package:astromic_mobile_elements/src/Widgets/src/scaffold.widget.dart';
import 'src/image.widget.dart';
import 'package:flutter/material.dart';
class AstromicWidgets {
//S1 -- SCAFFOLD
static Widget scaffold({
//S1 -- AppBar
PreferredSizeWidget? appBar,
bool isAppbarStacked = false,
//S1 -- FAB
Widget? floatingActionButton,
FloatingActionButtonLocation? floatingActionButtonLocation,
//S1 -- Other Integral Components
Widget? drawer,
Widget? bottomNavigationBar,
Widget? bottomSheet,
//S1 -- Styling
Color? backgroundColor,
EdgeInsetsGeometry? padding,
ScrollPhysics? scrollPhysics = const BouncingScrollPhysics(),
//S1 -- Configs
bool withSafeArea = false,
bool extendBody = false,
bool resizeToAvoidBottomInset = true,
bool withScrollView = false,
bool closeKeyboardOnTap = true,
//
Widget? body,
//
}) =>
astromicScaffold(
//
appBar: appBar,
isAppbarStacked: isAppbarStacked,
//
floatingActionButton: floatingActionButton,
floatingActionButtonLocation: floatingActionButtonLocation,
//
drawer: drawer,
bottomNavigationBar: bottomNavigationBar,
bottomSheet: bottomSheet,
//
backgroundColor: backgroundColor,
padding: padding,
scrollPhysics: scrollPhysics,
//
withSafeArea: withSafeArea,
extendBody: extendBody,
resizeToAvoidBottomInset: resizeToAvoidBottomInset,
withScrollView: withScrollView,
closeKeyboardOnTap: closeKeyboardOnTap,
//
body: body,
);
//S1 -- IMAGE
static Widget image(
BuildContext context, {
//S1 -- Asset
String? assetPath,
String? assetURL,
Uint8List? assetBytes,
String? assetFallback,
//S1 -- Sizing | Width
double? wFactor,
double? minW,
double? maxW,
double? fixedWidth,
//S1 -- Sizing | Width
bool useHeight = false,
double? hFactor,
double? minH,
double? maxH,
double? fixedHeight,
//S1 -- STYLING
bool circular = false,
double? border,
Color? borderColor,
EdgeInsetsGeometry? borderPadding,
BorderRadiusGeometry radius = BorderRadius.zero,
List<BoxShadow>? shadow,
//S1 -- SVG FILTERS
Color? color,
BlendMode? blend,
//S1 -- CONFIGS
BoxFit fit = BoxFit.cover,
Alignment alignment = Alignment.center,
LinearGradient? linearGradient,
//S1 -- STATE
Widget? loadingWidget,
Widget? errorWidget,
}) =>
astromicImage(
context,
//
assetPath: assetPath,
assetURL: assetURL,
assetBytes: assetBytes,
assetFallback: assetFallback,
//
wFactor: wFactor,
minW: minW,
maxW: maxW,
fixedWidth: fixedWidth,
//
useHeight: useHeight,
hFactor: hFactor,
minH: minH,
maxH: maxH,
fixedHeight: fixedHeight,
//
circular: circular,
border: border,
borderColor: borderColor,
borderPadding: borderPadding,
radius: radius,
shadow: shadow,
//
color: color,
blend: blend,
//
fit: fit,
alignment: alignment,
linearGradient: linearGradient,
//
loadingWidget: loadingWidget,
errorWidget: errorWidget,
);
//S1 -- BLUR
static Widget blur(
Widget child,
double sigmaX,
double sigmaY, {
Widget? topChild,
Color? overlayColor = const Color.fromRGBO(0, 0, 0, 0.1),
TileMode? tileMode = TileMode.mirror,
List<BoxShadow>? shadow,
BorderRadius? radius,
}) =>
astromicBlurEffect(
child,
sigmaX,
sigmaY,
topChild: topChild,
overlayColor: overlayColor,
tileMode: tileMode,
shadow: shadow,
radius: radius,
);
}