This commit is contained in:
Patrick Alvin Alcala 2025-03-06 11:55:42 +08:00
parent 148cdec83c
commit 7749f1100d
19 changed files with 447 additions and 217 deletions

View file

@ -0,0 +1,184 @@
import 'dart:ui';
import 'package:flutter/material.dart';
class GlossyContainer extends StatelessWidget {
// final double? height; // Height of the container
final double width; // Width of the container
final BorderRadiusGeometry? borderRadius; // Border radius of the container
final Color? color; // Background color of the container
final double? opacity; // Opacity of the container
final Widget? child; // Child widget inside the container
final double? strengthX; // Strength of blur in the horizontal direction
final double? strengthY; // Strength of blur in the vertical direction
final BoxBorder? border; // Border of the container
final BlendMode? blendMode; // Blend mode for applying filter
final GlossyGradient? gradient; // Gradient of the container
final List<BoxShadow>? boxShadow; // Box shadows for the container
final DecorationImage? image; // Background image of the container
final double? imageOpacity;
final EdgeInsets? padding;
final EdgeInsets? margin;
const GlossyContainer(
{super.key,
// this.height,
required this.width,
this.margin,
this.padding,
this.opacity,
this.strengthX,
this.strengthY,
this.borderRadius,
this.border,
this.color,
this.blendMode,
this.gradient,
this.child,
this.image,
this.imageOpacity,
this.boxShadow});
@override
Widget build(BuildContext context) {
late Gradient gradientToApply; // Gradient to apply based on the type
// Check if the gradient is linear
if (gradient is GlossyLinearGradient) {
final GlossyLinearGradient glg = gradient as GlossyLinearGradient;
gradientToApply = glg.getLinearGradient(); // Get the linear gradient
}
// Check if the gradient is radial
if (gradient is GlossyRadialGradient) {
final GlossyRadialGradient glg = gradient as GlossyRadialGradient;
gradientToApply = glg.getRadialGradient(); // Get the radial gradient
}
return Container(
decoration: BoxDecoration(
boxShadow: boxShadow, // Apply box shadows
borderRadius: borderRadius, // Apply border radius
),
child: ClipRRect(
borderRadius: borderRadius == null ? BorderRadius.circular(0) : borderRadius!,
child: Container(
// height: height,
width: width,
margin: margin,
padding: padding,
color: Colors.transparent,
child: Stack(children: [
// Apply backdrop filter for blurring effect
BackdropFilter(
blendMode: blendMode != null ? blendMode! : BlendMode.srcOver,
filter: ImageFilter.blur(
sigmaX: strengthX == null ? 15 : strengthX!,
sigmaY: strengthY == null ? 15 : strengthY!,
),
child: Container(),
),
Container(
// height: height,
width: width,
decoration: BoxDecoration(
boxShadow: boxShadow,
borderRadius: borderRadius,
border: border ??
Border.all(
color: Colors.white54,
width: 0.5,
),
gradient: gradient == null
? LinearGradient(
tileMode: TileMode.mirror,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
color == null
? const Color.fromARGB(255, 138, 137, 137).withValues(alpha: opacity ?? 0.15)
: color!.withValues(alpha: opacity ?? 0.15),
color == null
? const Color.fromARGB(255, 121, 120, 120).withValues(alpha: opacity ?? 0.15)
: color!.withValues(alpha: opacity ?? 0.15),
])
: gradientToApply,
),
),
// Apply background image if available
image != null
? Opacity(
opacity: imageOpacity == null ? 1 : imageOpacity!,
child: Container(
// height: height,
width: width,
decoration: BoxDecoration(image: image),
),
)
: const SizedBox(),
Container(
child: child,
)
]),
),
),
);
}
}
// Abstract class for defining glossy gradients
abstract class GlossyGradient {
const GlossyGradient({required this.colors, required this.opacity});
final List<Color> colors;
final double opacity;
}
// Class for defining glossy linear gradients
class GlossyLinearGradient extends GlossyGradient {
const GlossyLinearGradient({
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
required super.colors,
this.tileMode = TileMode.clamp,
required super.opacity,
});
final AlignmentGeometry begin;
final AlignmentGeometry end;
final TileMode tileMode;
// Get linear gradient
LinearGradient getLinearGradient() {
return LinearGradient(
colors: colors.map((e) => e.withValues(alpha: opacity)).toList(), begin: begin, end: end, tileMode: tileMode);
}
}
// Class for defining glossy radial gradients
class GlossyRadialGradient extends GlossyGradient {
const GlossyRadialGradient({
this.center = Alignment.center,
this.radius = 0.5,
required super.colors,
required super.opacity,
this.tileMode = TileMode.clamp,
this.focal,
this.focalRadius = 0.0,
});
final AlignmentGeometry center;
final double radius;
final TileMode tileMode;
final AlignmentGeometry? focal;
final double focalRadius;
// Get radial gradient
RadialGradient getRadialGradient() {
return RadialGradient(
colors: colors.map((e) => e.withValues(alpha: opacity)).toList(),
center: center,
focal: focal,
focalRadius: focalRadius,
radius: radius,
tileMode: tileMode,
);
}
}

View file

@ -1,15 +1,17 @@
import 'package:flutter/material.dart';
import 'package:glossy/glossy.dart';
// import 'package:glossy/glossy.dart';
import 'package:pharmacy_mobile/widgets/customized_pub/glossy_container.dart';
class GlossyContainerWidget extends StatelessWidget {
final double height;
final Widget child;
const GlossyContainerWidget({super.key, required this.height, required this.child});
const GlossyContainerWidget({
super.key,
required this.child,
});
@override
Widget build(BuildContext context) {
return GlossyContainer(
height: MediaQuery.of(context).size.height * height,
width: MediaQuery.of(context).size.width,
borderRadius: const BorderRadius.all(Radius.circular(16)),
color: const Color.fromRGBO(20, 13, 22, 1),

View file

@ -0,0 +1,60 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:pharmacy_mobile/widgets/dropdown_widget.dart';
class InputFormWidget extends StatelessWidget {
final String label;
final TextEditingController controller;
final bool? password;
final OnChangedCallback? onChanged;
final String? placeholder;
final ValueChanged<String>? onSubmitted;
final FormFieldValidator? validator;
const InputFormWidget(
{super.key,
required this.label,
required this.controller,
this.password,
this.onChanged,
this.placeholder,
this.onSubmitted,
this.validator});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (label.isNotEmpty)
Text('$label:',
style: GoogleFonts.inter(
textStyle:
const TextStyle(color: Color.fromRGBO(255, 255, 255, 1), fontSize: 12, fontWeight: FontWeight.w500),
)),
const Gap(8),
TextFormField(
textInputAction: TextInputAction.go,
controller: controller,
decoration: InputDecoration(
filled: true,
fillColor: const Color.fromRGBO(255, 255, 255, 1),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(4)),
contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 14),
prefixIcon: placeholder != null ? Icon(Icons.search, color: Colors.grey) : null,
hintText: placeholder),
style: GoogleFonts.inter(
textStyle: const TextStyle(
color: Color.fromRGBO(0, 0, 0, 1),
fontSize: 16,
)),
obscureText: password ?? false,
onChanged: onChanged,
onFieldSubmitted: onSubmitted,
validator: validator,
),
],
);
}
}

View file

@ -1,17 +1,18 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:pharmacy_mobile/widgets/dropdown_widget.dart';
class InputWidget extends StatelessWidget {
final String label;
final TextEditingController controller;
final bool? password;
final OnChangedCallback? onChanged;
final String? placeholder;
final String placeholder;
const InputWidget(
{super.key, required this.label, required this.controller, this.password, this.onChanged, this.placeholder});
const InputWidget({
super.key,
required this.label,
required this.controller,
required this.placeholder,
});
@override
Widget build(BuildContext context) {
@ -26,7 +27,6 @@ class InputWidget extends StatelessWidget {
)),
const Gap(8),
TextField(
textInputAction: TextInputAction.go,
controller: controller,
decoration: InputDecoration(
filled: true,
@ -40,8 +40,6 @@ class InputWidget extends StatelessWidget {
color: Color.fromRGBO(0, 0, 0, 1),
fontSize: 16,
)),
obscureText: password ?? false,
onChanged: onChanged,
),
],
);