Obx(
() => CustomContainer(
title: "Elevated Button main color",
description: themeController.useMaterial3.value
? 'Foreground color'
: 'Background color',
child: ThemePopupMenu3(
contentPadding: EdgeInsets.zero,
schemeIndex: themeController
.setElevatedButtonSchemeIndex.value,
onChanged:
themeController.setElevatedButtonSchemeColor,
),
),
),
Obx(
() => CustomContainer(
title: "Elevated Button secondary color",
description: "Background color",
child: ThemePopupMenu3(
contentPadding: EdgeInsets.zero,
schemeIndex: themeController
.setElevatedButtonSecondarySchemeIndex.value,
onChanged:
themeController.setElevatedButtonSecondarySchemeColor,
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Obx(
() => Flexible(
child: _buildCommonContainer(
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
overlayShape: SliderComponentShape.noOverlay,
),
child: SizedBox(
width: 1000,
child: Slider(
value: themeController.elevatedButtonBorderRadius.value,
min: -1,
max: 40,
divisions: 20,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController.setElevatedButtonBorderRadius(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Elevated Button Border Radius',
description: 'Adjust the elevated border radius to your preference.',
),
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0, top: 28),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('Radius'),
Obx(
() {
final borderRadius = themeController.elevatedButtonBorderRadius.value;
final integerPart = double.parse(borderRadius.toStringAsFixed(0)).toInt();
return SizedBox(
width: 55,
child: Text(
themeController.elevatedButtonBorderRadius.value == -1
? 'default stadium'
: integerPart.toString(),
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
style: TextStyles.titleSmall.copyWith(fontSize: 12),
),
);
},
)
],
),
)
],
)
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final ThemeController _themeController = Get.put(ThemeController());
@override
Widget build(BuildContext context) {
return GetMaterialApp(
theme: ThemeData(
elevatedButtonTheme: _themeController.buildElevatedThemeData(context),
),
home: ElevatedButtonScreen(),
);
}
}
class ElevatedButtonScreen extends StatelessWidget {
const ElevatedButtonScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Elevated Button Theme"),
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(
children: [
ElevatedButtonShowcase(),
ElevatedButtonCustomizer(),
],
),
),
);
}
}
class ElevatedButtonShowcase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {},
child: Text('Elevated button'),
),
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.add),
label: Text('Elevated icon'),
),
ElevatedButton(
onPressed: null,
child: Text('Disabled button'),
),
],
);
}
}
class ElevatedButtonCustomizer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Customize your buttons:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
Get.to(() => CustomizationPage());
},
child: Text('Customization Page'),
),
],
);
}
}
class CustomizationPage extends StatelessWidget {
final ThemeController _themeController = Get.find();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Button Customization"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Primary Color:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
ThemePopupMenu(
onChanged: _themeController.setElevatedButtonSchemeColor,
),
SizedBox(height: 20),
Text(
'Secondary Color:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
ThemePopupMenu(
onChanged: _themeController.setElevatedButtonSecondarySchemeColor,
),
SizedBox(height: 20),
Text(
'Border Radius:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
Slider(
value: _themeController.elevatedButtonBorderRadius.value,
min: -1,
max: 40,
divisions: 20,
onChanged: (value) {
_themeController.setElevatedButtonBorderRadius(value);
},
),
],
),
);
}
}
class ThemePopupMenu extends StatelessWidget {
final void Function(Color?, int) onChanged;
const ThemePopupMenu({required this.onChanged});
@override
Widget build(BuildContext context) {
return DropdownButton<Color>(
value: null, // Add value here
onChanged: (color) {
onChanged(color, 0); // Add index value here
},
items: [
DropdownMenuItem(
child: Text('Option 1'), // Change text
value: Colors.red, // Change color
),
DropdownMenuItem(
child: Text('Option 2'), // Change text
value: Colors.blue, // Change color
),
],
);
}
}
class ThemeController extends GetxController {
final RxDouble elevatedButtonBorderRadius = 20.0.obs;
Rx<Color?> setElevatedButtonSchemeColor = Rx<Color?>(null);
Rx<Color?> setElevatedButtonSecondarySchemeColor = Rx<Color?>(null);
void setElevatedButtonBorderRadius(double value) {
elevatedButtonBorderRadius.value = value;
}
ElevatedButtonThemeData buildElevatedThemeData(BuildContext context) {
return ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: setElevatedButtonSchemeColor.value,
onPrimary: setElevatedButtonSecondarySchemeColor.value,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
elevatedButtonBorderRadius.value == -1
? 20
: elevatedButtonBorderRadius.value,
),
),
),
);
}
}
