WinXaito
commented
4 months ago I will let @bdlukaa give an answer to you. But I tried and honestly I'm impressed.
I give it that prompt:
How to create a button with a background red (while keeping the hover and pressing effects with a darker red) and a blue border. The text inside the button should be "Confirm".
And here is the result:
To create a button with a red background, a darker red hover and pressing effect, a blue border, and the text "Confirm" using the fluent_ui package, you can customize the ButtonStyle accordingly. Here's how you can achieve this:
```dart
import 'package:fluent_ui/fluent_ui.dart';
class CustomButtonExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScaffoldPage(
header: PageHeader(title: Text('Custom Button Example')),
content: Center(
child: Button(
onPressed: () {
// Handle button press
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.resolveWith((states) {
if (states.isPressed) {
return Colors.red.darker;
} else if (states.isHovered) {
return Colors.red.dark;
} else {
return Colors.red;
}
}),
foregroundColor: WidgetStateProperty.all(Colors.white),
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0),
side: BorderSide(color: Colors.blue),
),
),
padding: WidgetStateProperty.all(EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)),
),
child: Text('Confirm'),
),
),
);
}
}
void main() {
runApp(FluentApp(
home: CustomButtonExample(),
));
}
```
In this example:
backgroundColor is set using WidgetStateProperty.resolveWith to provide different colors based on the button's state (pressed, hovered, or default).
foregroundColor is set to white to ensure the text is visible against the red background.
shape is set to a RoundedRectangleBorder with a blue border.
padding is added to give some space around the text inside the button.
This will create a button with the specified styles and the text "Confirm". The button will have a red background, a darker red color when hovered or pressed, and a blue border.
Source
`/...-master-lib-src-controls-inputs-buttons-theme.dart`
`/...master-lib-src-controls-inputs-buttons-button.dart`
Dear maintainers, greetings from CommandDash!
We are a tool to turn docs and examples of your library into a code generation AI agent which helps devs directly generate code for your library as per their requirements.
Our team came across Flutter Fluent UI and figured it could be helpful for new developers building on it to have one such agent. It's ready and is accessible on: Web (Try here!) | VSCode Extension
You can link this in your readme as a badge:
Please feel free to mention it if you believe this could be helpful for new users. Or, close the issue if not. 🙏🏻
The agent is free to use, fully safe (no data retained) and auto-refreshes to stay upto date.
Best wishes!