s_disabled 1.0.0
s_disabled: ^1.0.0 copied to clipboard
A customizable Flutter widget for disabling and visually indicating disabled state of child widgets with optional opacity changes and tap detection.
import 'package:flutter/material.dart';
import 'package:s_disabled/s_disabled.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 's_disabled Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const MyHomePage(),
routes: {
'/advanced': (context) => const AdvancedExamplePage(),
'/form': (context) => const FormExamplePage(),
},
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isButtonDisabled = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('s_disabled Package'),
centerTitle: true,
elevation: 2,
),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 20),
const Text(
'Basic Example',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
const Text(
'Toggle the button below to see how SDisabled works:',
style: TextStyle(fontSize: 16),
textAlign: TextAlign.center,
),
const SizedBox(height: 30),
SDisabled(
isDisabled: _isButtonDisabled,
child: ElevatedButton.icon(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Button was clicked!'),
duration: Duration(milliseconds: 800),
),
);
},
icon: const Icon(Icons.check),
label: const Text('Click me'),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 32,
vertical: 16,
),
),
),
),
const SizedBox(height: 24),
AnimatedOpacity(
opacity: _isButtonDisabled ? 0.5 : 1.0,
duration: const Duration(milliseconds: 300),
child: Text(
_isButtonDisabled
? 'Button is DISABLED'
: 'Button is ENABLED',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: _isButtonDisabled ? Colors.red : Colors.green,
),
),
),
const SizedBox(height: 24),
ElevatedButton.icon(
onPressed: () {
setState(() {
_isButtonDisabled = !_isButtonDisabled;
});
},
icon: const Icon(Icons.toggle_on),
label: const Text('Toggle disable state'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.orangeAccent,
),
),
const SizedBox(height: 48),
const Divider(thickness: 2),
const SizedBox(height: 32),
const Text(
'More Examples',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed('/advanced');
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
),
child: const Text('Advanced Customization'),
),
),
const SizedBox(height: 12),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed('/form');
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 12),
),
child: const Text('Form Example'),
),
),
],
),
),
),
);
}
}
class AdvancedExamplePage extends StatefulWidget {
const AdvancedExamplePage({super.key});
@override
State<AdvancedExamplePage> createState() => _AdvancedExamplePageState();
}
class _AdvancedExamplePageState extends State<AdvancedExamplePage> {
bool _isDisabled = true;
double _opacityValue = 0.5;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Advanced Customization'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Custom Opacity & Tap Detection',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
const Text('Opacity Level when Disabled:'),
Slider(
value: _opacityValue,
min: 0.0,
max: 1.0,
divisions: 10,
label: (_opacityValue * 100).toStringAsFixed(0),
onChanged: (value) {
setState(() {
_opacityValue = value;
});
},
),
const SizedBox(height: 24),
Center(
child: SDisabled(
isDisabled: _isDisabled,
opacityWhenDisabled: _opacityValue,
onTappedWhenDisabled: (offset) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Tapped disabled widget at: (${offset.dx.toStringAsFixed(0)}, ${offset.dy.toStringAsFixed(0)})',
),
duration: const Duration(milliseconds: 1500),
),
);
},
child: Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: const Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.touch_app, color: Colors.white, size: 32),
SizedBox(height: 12),
Text(
'Try tapping me!',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
),
const SizedBox(height: 24),
Center(
child: ElevatedButton(
onPressed: () {
setState(() {
_isDisabled = !_isDisabled;
});
},
child: Text(
_isDisabled ? 'Enable Widget' : 'Disable Widget',
),
),
),
const SizedBox(height: 48),
const Text(
'No Opacity Change',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
const Text('Widget stays fully visible when disabled:'),
const SizedBox(height: 16),
SDisabled(
isDisabled: _isDisabled,
disableOpacityChange: true,
onTappedWhenDisabled: (_) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('This widget is disabled but fully visible!'),
),
);
},
child: TextField(
enabled: false,
decoration: InputDecoration(
hintText: 'Disabled TextField (no opacity change)',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
prefixIcon: const Icon(Icons.info),
),
),
),
],
),
),
);
}
}
class FormExamplePage extends StatefulWidget {
const FormExamplePage({super.key});
@override
State<FormExamplePage> createState() => _FormExamplePageState();
}
class _FormExamplePageState extends State<FormExamplePage> {
final _formKey = GlobalKey<FormState>();
bool _isSubmitting = false;
String? _formResult;
Future<void> _submitForm() async {
if (_formKey.currentState!.validate()) {
setState(() {
_isSubmitting = true;
_formResult = null;
});
// Simulate API call
await Future.delayed(const Duration(seconds: 2));
setState(() {
_isSubmitting = false;
_formResult = 'Form submitted successfully!';
});
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Form submitted!'),
duration: Duration(milliseconds: 1500),
),
);
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Form Example'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Disable Submit During Processing',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
TextFormField(
decoration: InputDecoration(
labelText: 'Full Name',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
prefixIcon: const Icon(Icons.person),
),
validator: (value) {
if (value?.isEmpty ?? true) {
return 'Please enter your name';
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
prefixIcon: const Icon(Icons.email),
),
validator: (value) {
if (value?.isEmpty ?? true) {
return 'Please enter your email';
}
if (!value!.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(
labelText: 'Message',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
prefixIcon: const Icon(Icons.message),
),
maxLines: 4,
validator: (value) {
if (value?.isEmpty ?? true) {
return 'Please enter a message';
}
return null;
},
),
const SizedBox(height: 24),
SDisabled(
isDisabled: _isSubmitting,
opacityWhenDisabled: 0.6,
onTappedWhenDisabled: (_) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content:
Text('Please wait while form is being submitted...'),
duration: Duration(milliseconds: 1500),
),
);
},
child: SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: _submitForm,
icon: _isSubmitting
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor:
AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: const Icon(Icons.send),
label: Text(
_isSubmitting ? 'Submitting...' : 'Submit',
),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
),
),
),
),
if (_formResult != null) ...[
const SizedBox(height: 24),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.green.withValues(alpha: 0.1),
border: Border.all(color: Colors.green),
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
const Icon(Icons.check_circle, color: Colors.green),
const SizedBox(width: 12),
Expanded(
child: Text(
_formResult!,
style: const TextStyle(
color: Colors.green,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
],
],
),
),
),
);
}
}