UI changes to match material3 guidelines

This commit is contained in:
Juan Gilsanz Polo 2022-11-03 15:36:39 +01:00
parent 286e46d4d8
commit 960a3da0fc
6 changed files with 62 additions and 81 deletions

View file

@ -48,7 +48,7 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
child: InkWell(
onTap: () => onChanged(id),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@ -58,7 +58,7 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
icon,
size: 24,
),
const SizedBox(width: 20),
const SizedBox(width: 16),
Text(
label,
style: const TextStyle(
@ -80,8 +80,8 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
}
return Container(
height: height >= 680 == true
? 680
height: height >= 720 == true
? 720
: height-25,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
@ -95,23 +95,24 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
const Padding(
padding: EdgeInsets.only(
top: 24,
bottom: 20,
bottom: 16,
),
child: Icon(
Icons.shield_rounded,
size: 26,
size: 24,
),
),
Text(
AppLocalizations.of(context)!.responseStatus,
style: const TextStyle(
fontSize: 24
fontSize: 24,
fontWeight: FontWeight.w400
),
),
const SizedBox(height: 20),
const SizedBox(height: 16),
Expanded(
child: ListView(
physics: height >= 680 == true
physics: height >= 720 == true
? const NeverScrollableScrollPhysics()
: null,
children: [
@ -168,7 +169,7 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
),
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [

View file

@ -120,7 +120,7 @@ class LogDetailsScreen extends StatelessWidget {
body: ListView(
children: [
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Text(
AppLocalizations.of(context)!.status,
style: TextStyle(
@ -163,7 +163,7 @@ class LogDetailsScreen extends StatelessWidget {
subtitle: formatTimestampUTCFromAPI(log.time, 'HH:mm:ss')
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Text(
AppLocalizations.of(context)!.request,
style: TextStyle(
@ -215,7 +215,7 @@ class LogDetailsScreen extends StatelessWidget {
subtitle: log.status
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Text(
AppLocalizations.of(context)!.client,
style: TextStyle(
@ -237,7 +237,7 @@ class LogDetailsScreen extends StatelessWidget {
),
if (log.rules.isNotEmpty) ...[
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
child: Text(
AppLocalizations.of(context)!.rules,
style: TextStyle(
@ -255,7 +255,7 @@ class LogDetailsScreen extends StatelessWidget {
],
if (log.answer.isNotEmpty) ...[
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Text(
AppLocalizations.of(context)!.answer,
style: TextStyle(
@ -291,28 +291,3 @@ class LogDetailsScreen extends StatelessWidget {
);
}
}
// Padding(
// padding: const EdgeInsets.all(20),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// TextButton(
// onPressed: () {
// blockUnblock(log, getFilteredStatus(context, appConfigProvider, log.reason, true)['filtered'] == true ? 'unblock' : 'block');
// Navigator.pop(context);
// },
// child: Text(
// getFilteredStatus(context, appConfigProvider, log.reason, true)['filtered'] == true
// ? AppLocalizations.of(context)!.unblockDomain
// : AppLocalizations.of(context)!.blockDomain
// )
// ),
// TextButton(
// onPressed: () => Navigator.pop(context),
// child: Text(AppLocalizations.of(context)!.close)
// ),
// ],
// ),
// )

View file

@ -19,7 +19,7 @@ class LogListTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@ -30,7 +30,7 @@ class LogListTile extends StatelessWidget {
icon,
size: 24,
),
const SizedBox(width: 20),
const SizedBox(width: 16),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -38,10 +38,11 @@ class LogListTile extends StatelessWidget {
Text(
title,
style: const TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.w400
),
),
const SizedBox(height: 5),
const SizedBox(height: 3),
subtitleWidget ?? Text(
subtitle!,
style: TextStyle(
@ -56,7 +57,7 @@ class LogListTile extends StatelessWidget {
),
),
if (trailing != null) ...[
const SizedBox(width: 10),
const SizedBox(width: 16),
trailing!
]
],

View file

@ -122,18 +122,18 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
children: [
Expanded(
child: ListView(
physics: 450 < MediaQuery.of(context).size.height
physics: 420 < MediaQuery.of(context).size.height
? const NeverScrollableScrollPhysics()
: null,
children: [
const Padding(
padding: EdgeInsets.only(top: 28),
padding: EdgeInsets.only(top: 24),
child: Icon(
Icons.settings,
size: 26,
size: 24,
),
),
const SizedBox(height: 20),
const SizedBox(height: 16),
Text(
AppLocalizations.of(context)!.logsSettings,
textAlign: TextAlign.center,
@ -141,9 +141,9 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
fontSize: 24
),
),
const SizedBox(height: 30),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Material(
color: Theme.of(context).primaryColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(28),
@ -175,7 +175,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
),
),
),
const SizedBox(height: 20),
const SizedBox(height: 16),
Material(
color: Colors.transparent,
child: InkWell(
@ -201,9 +201,9 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
),
),
),
const SizedBox(height: 20),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 28),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: DropdownButtonFormField(
items: retentionItems.map<DropdownMenuItem<String>>((Map<String, dynamic> item) {
return DropdownMenuItem<String>(
@ -228,7 +228,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
),
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@ -308,7 +308,7 @@ class _LogsConfigModalWidgetState extends State<LogsConfigModalWidget> {
}
return Container(
height: 450,
height: 420,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),

View file

@ -171,7 +171,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
height: 400,
height: 350,
decoration: BoxDecoration(
color: Theme.of(context).dialogBackgroundColor,
borderRadius: const BorderRadius.only(
@ -190,27 +190,28 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
const Padding(
padding: EdgeInsets.only(
top: 24,
bottom: 20,
bottom: 16,
),
child: Icon(
Icons.filter_list_rounded,
size: 26,
size: 24,
),
),
Text(
AppLocalizations.of(context)!.filters,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 24
fontSize: 24,
fontWeight: FontWeight.w400,
height: 1.3
),
),
const SizedBox(height: 20),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width - 108,
Expanded(
child: TextFormField(
controller: searchController,
onChanged: (value) => logsProvider.setSearchText(value),
@ -222,11 +223,7 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
)
),
labelText: AppLocalizations.of(context)!.search,
),
),
),
const SizedBox(width: 20),
IconButton(
suffixIcon: IconButton(
onPressed: () {
setState(() {
searchController.text = '';
@ -235,9 +232,13 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
},
icon: const Icon(Icons.clear)
)
),
),
)
],
),
),
const SizedBox(height: 16),
// Material(
// color: Colors.transparent,
// child: InkWell(
@ -284,12 +285,13 @@ class _LogsFiltersModalWidgetState extends State<LogsFiltersModalWidget> {
subtitle: "${translatedString[logsProvider.selectedResultStatus]}",
onTap: openSelectFilterStatus,
icon: Icons.shield_rounded,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
),
],
),
),
Padding(
padding: const EdgeInsets.all(20),
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [

View file

@ -27,7 +27,7 @@ class CustomListTile extends StatelessWidget {
child: InkWell(
onTap: onTap,
child: Padding(
padding: padding ?? const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
padding: padding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@ -38,8 +38,9 @@ class CustomListTile extends StatelessWidget {
if (icon != null) ...[
Icon(
icon,
size: 24,
),
const SizedBox(width: 20),
const SizedBox(width: 16),
],
Flexible(
child: Column(
@ -48,8 +49,8 @@ class CustomListTile extends StatelessWidget {
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.normal
fontSize: 16,
fontWeight: FontWeight.w400
),
),
if (subtitle != null || subtitleWidget != null) ...[
@ -59,7 +60,8 @@ class CustomListTile extends StatelessWidget {
subtitle!,
style: TextStyle(
color: Theme.of(context).listTileTheme.iconColor,
fontSize: 14
fontSize: 14,
fontWeight: FontWeight.w400
),
),
]