Implement NewTaskButton with styling and tests

This commit introduces the NewTaskButton widget, designed to allow users to create new tasks. The button follows specific design guidelines, including dimensions, colors, and layout.

Key Features:

Button with a set height and adaptive width.
Icon and text layout within the button.
Styling for background, border, and corner radius.
Associated tests to ensure the button's functionality and appearance.
This commit is contained in:
hunteraraujo
2023-08-22 16:59:36 -04:00
parent 1436092a35
commit d830a7ebcf
2 changed files with 71 additions and 0 deletions

View File

@@ -0,0 +1,47 @@
import 'package:flutter/material.dart';
class NewTaskButton extends StatelessWidget {
final VoidCallback onPressed;
const NewTaskButton({Key? key, required this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
// Determine the width of the TaskView
double taskViewWidth = MediaQuery.of(context).size.width;
double buttonWidth = taskViewWidth - 20;
if (buttonWidth > 260) {
buttonWidth = 260;
}
return ElevatedButton(
onPressed: onPressed,
style: ButtonStyle(
// Set the button's background color
backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
// Set the button's edge
side: MaterialStateProperty.all<BorderSide>(
const BorderSide(color: Colors.black, width: 0.5)),
// Set the button's shape with rounded corners
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
child: Container(
width: buttonWidth,
height: 50,
child: Row(
children: [
// Black plus icon
Icon(Icons.add, color: Colors.black),
SizedBox(width: 8),
// "New Task" label
Text('New Task', style: TextStyle(color: Colors.black)),
],
),
),
);
}
}

View File

@@ -0,0 +1,24 @@
import 'package:auto_gpt_flutter_client/views/new_task_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('NewTaskButton triggers callback on press',
(WidgetTester tester) async {
bool wasPressed = false;
// Build our widget.
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: NewTaskButton(onPressed: () => wasPressed = true),
),
));
// Verify if the button with the text 'New Task' is displayed.
expect(find.text('New Task'), findsOneWidget);
// Tap the button and verify if the onPressed callback is triggered.
await tester.tap(find.byType(ElevatedButton));
expect(wasPressed, true);
});
}