Skip to content

Commit

Permalink
🚧 Update text form field border
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubham-jitiya-simform
shubham-jitiya-simform committed Jan 28, 2025
1 parent bc29236 commit 420ed38
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 19 deletions.
2 changes: 1 addition & 1 deletion example/lib/constants.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class AppConstants {
borderRadius: BorderRadius.circular(7),
borderSide: BorderSide(
width: 2,
color: AppColors.primary,
color: AppColors.outlineVariant,
),
);

Expand Down
2 changes: 2 additions & 0 deletions example/lib/theme/app_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ class AppColors {

static const Color primary = Color(0xffEF5366);
static const Color onPrimary = Color(0xfff0f0f0);
static const Color outlineVariant = Color(0xffd7c1c2);
static const Color outline = Color(0xff857373);
static const Color surfaceContainerLow = Color(0xfffff0f0);
static const Color black = Color(0xff626262);
static const Color radiantWhite = Color(0xffffffff);
Expand Down
65 changes: 61 additions & 4 deletions example/lib/theme/app_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,46 @@ import 'package:flutter/material.dart';
import 'dark_app_colors.dart';

class AppTheme {
// Base InputDecorationTheme
static final baseInputDecorationTheme = InputDecorationTheme(
border: AppConstants.inputBorder,
disabledBorder: AppConstants.inputBorder,
errorBorder: AppConstants.inputBorder.copyWith(
borderSide: BorderSide(
width: 2,
color: AppColors.red,
),
),
enabledBorder: AppConstants.inputBorder,
focusedBorder: AppConstants.inputBorder.copyWith(
borderSide: BorderSide(
width: 2,
color: AppColors.outline,
),
),
focusedErrorBorder: AppConstants.inputBorder,
hintStyle: TextStyle(
color: AppColors.black,
fontSize: 17,
),
labelStyle: TextStyle(
color: AppColors.black,
fontSize: 17,
),
helperStyle: TextStyle(
color: AppColors.black,
fontSize: 17,
),
errorStyle: TextStyle(
color: AppColors.red,
fontSize: 12,
),
contentPadding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
);

// Light theme
static final light = CalendarTheme.light.copyWith(
// TODO(Shubham): Reorder
Expand All @@ -18,10 +58,7 @@ class AppTheme {
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: AppColors.primary,
),
inputDecorationTheme: InputDecorationTheme(
border: AppConstants.inputBorder,
focusedBorder: AppConstants.inputBorder,
),
inputDecorationTheme: baseInputDecorationTheme,
appBarTheme: AppBarTheme(
backgroundColor: AppColors.primary,
foregroundColor: AppColors.onPrimary,
Expand All @@ -45,6 +82,26 @@ class AppTheme {
foregroundColor: DarkAppColors.onPrimary,
),
),
inputDecorationTheme: baseInputDecorationTheme.copyWith(
disabledBorder: AppConstants.inputBorder.copyWith(
borderSide: BorderSide(
width: 2,
color: DarkAppColors.outlineVariant,
),
),
enabledBorder: AppConstants.inputBorder.copyWith(
borderSide: BorderSide(
width: 2,
color: DarkAppColors.outlineVariant,
),
),
focusedBorder: AppConstants.inputBorder.copyWith(
borderSide: BorderSide(
width: 2,
color: DarkAppColors.outline,
),
),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: DarkAppColors.primary,
),
Expand Down
2 changes: 2 additions & 0 deletions example/lib/theme/dark_app_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@ class DarkAppColors {

static const Color primary = Color(0xffffb3b6);
static const Color onPrimary = Color(0xff561d23);
static const Color outline = Color(0xff9f8c8c);
static const Color outlineVariant = Color(0xff524343);
}
28 changes: 14 additions & 14 deletions example/lib/widgets/add_event_form.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,12 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
children: [
TextFormField(
controller: _titleController,
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: "Event Title",
labelStyle: TextStyle(
color: color.onSurfaceVariant,
),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
style: TextStyle(
color: color.onSurface,
fontSize: 17.0,
Expand All @@ -101,12 +101,12 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
children: [
Expanded(
child: DateTimeSelectorFormField(
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: "Start Date",
labelStyle: TextStyle(
color: color.onSurfaceVariant,
),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
initialDateTime: _startDate,
onSelect: (date) {
if (date.withoutTime.withoutTime
Expand Down Expand Up @@ -140,12 +140,12 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
Expanded(
child: DateTimeSelectorFormField(
initialDateTime: _endDate,
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: "End Date",
labelStyle: TextStyle(
color: color.onSurfaceVariant,
),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
onSelect: (date) {
if (date.withoutTime.withoutTime
.isBefore(_startDate.withoutTime)) {
Expand Down Expand Up @@ -184,12 +184,12 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
children: [
Expanded(
child: DateTimeSelectorFormField(
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: "Start Time",
labelStyle: TextStyle(
color: color.onSurfaceVariant,
),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
initialDateTime: _startTime,
minimumDateTime: CalendarConstants.epochDate,
onSelect: (date) {
Expand All @@ -214,12 +214,12 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
SizedBox(width: 20.0),
Expanded(
child: DateTimeSelectorFormField(
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: "End Time",
labelStyle: TextStyle(
color: color.onSurfaceVariant,
),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
initialDateTime: _endTime,
onSelect: (date) {
if (_startTime != null &&
Expand Down Expand Up @@ -268,10 +268,10 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {

return null;
},
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
hintText: "Event Description",
counterStyle: TextStyle(color: color.onSurfaceVariant),
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
),
Align(
alignment: Alignment.centerLeft,
Expand Down Expand Up @@ -478,9 +478,9 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
if (_selectedRecurrenceEnd == RecurrenceEnd.onDate)
DateTimeSelectorFormField(
initialDateTime: _recurrenceEndDate,
decoration: AppConstants.inputDecoration.copyWith(
decoration: InputDecoration(
labelText: 'Ends on',
),
).applyDefaults(Theme.of(context).inputDecorationTheme),
onSelect: (date) {
if (date.withoutTime.isBefore(_endDate.withoutTime)) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
Expand Down

0 comments on commit 420ed38

Please sign in to comment.