update
This commit is contained in:
parent
148cdec83c
commit
7749f1100d
19 changed files with 447 additions and 217 deletions
184
lib/widgets/customized_pub/glossy_container.dart
Normal file
184
lib/widgets/customized_pub/glossy_container.dart
Normal 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,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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),
|
||||
|
|
|
|||
60
lib/widgets/input_form_widget.dart
Normal file
60
lib/widgets/input_form_widget.dart
Normal 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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue