Improvements clients view

This commit is contained in:
Juan Gilsanz Polo 2023-05-04 01:59:50 +02:00
parent dafff9b242
commit 769238cff9
3 changed files with 206 additions and 157 deletions

View file

@ -131,7 +131,7 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
);
}
Widget tabBarView() {
Widget tabBarView(bool sliver) {
return TabBarView(
controller: tabController,
children: [
@ -149,6 +149,7 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
)
)),
splitView: false,
sliver: sliver,
),
AddedList(
scrollController: scrollController,
@ -168,33 +169,33 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
]
);
}
if (!(Platform.isAndroid || Platform.isIOS)) {
if (width > 900) {
return SplitView.material(
hideDivider: true,
flexWidth: const FlexWidth(mainViewFlexWidth: 1, secondaryViewFlexWidth: 2),
placeholder: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(
AppLocalizations.of(context)!.selectClientLeftColumn,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
if (width > 900) {
return SplitView.material(
hideDivider: true,
flexWidth: const FlexWidth(mainViewFlexWidth: 1, secondaryViewFlexWidth: 2),
placeholder: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(
AppLocalizations.of(context)!.selectClientLeftColumn,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
),
),
child: ClientsDesktopView(
serversProvider: serversProvider,
appConfigProvider: appConfigProvider,
fetchClients: fetchClients,
)
);
}
else {
),
child: ClientsDesktopView(
serversProvider: serversProvider,
appConfigProvider: appConfigProvider,
fetchClients: fetchClients,
)
);
}
else {
if (!(Platform.isAndroid || Platform.isIOS)) {
return DefaultTabController(
length: 2,
child: Scaffold(
@ -217,87 +218,87 @@ class _ClientsWidgetState extends State<ClientsWidget> with TickerProviderStateM
],
bottom: tabBar()
),
body: tabBarView(),
body: tabBarView(false),
),
);
}
}
else {
return DefaultTabController(
length: 2,
child: NestedScrollView(
controller: scrollController,
headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
title: searchMode == true
? Row(
children: [
IconButton(
onPressed: () {
setState(() {
searchMode = false;
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.arrow_back_rounded)
),
const SizedBox(width: 16),
Expanded(
child: TextField(
controller: searchController,
onChanged: (value) => serversProvider.setSearchTermClients(value),
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.clear_rounded)
else {
return DefaultTabController(
length: 2,
child: NestedScrollView(
controller: scrollController,
headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
title: searchMode == true
? Row(
children: [
IconButton(
onPressed: () {
setState(() {
searchMode = false;
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.arrow_back_rounded)
),
const SizedBox(width: 16),
Expanded(
child: TextField(
controller: searchController,
onChanged: (value) => serversProvider.setSearchTermClients(value),
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.clear_rounded)
),
hintText: AppLocalizations.of(context)!.search,
hintStyle: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
border: InputBorder.none,
),
hintText: AppLocalizations.of(context)!.search,
hintStyle: const TextStyle(
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
border: InputBorder.none,
),
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
),
)
],
)
: Text(AppLocalizations.of(context)!.clients),
pinned: true,
floating: true,
centerTitle: false,
forceElevated: innerBoxIsScrolled,
actions: [
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
IconButton(
onPressed: () => setState(() => searchMode = true),
icon: const Icon(Icons.search),
tooltip: AppLocalizations.of(context)!.searchClients,
),
const SizedBox(width: 10),
]
],
bottom: tabBar()
),
)
];
}),
body: tabBarView()
)
);
)
],
)
: Text(AppLocalizations.of(context)!.clients),
pinned: true,
floating: true,
centerTitle: false,
forceElevated: innerBoxIsScrolled,
actions: [
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
IconButton(
onPressed: () => setState(() => searchMode = true),
icon: const Icon(Icons.search),
tooltip: AppLocalizations.of(context)!.searchClients,
),
const SizedBox(width: 10),
]
],
bottom: tabBar()
),
)
];
}),
body: tabBarView(true)
)
);
}
}
}
}

View file

@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_split_view/flutter_split_view.dart';
import 'package:provider/provider.dart';
@ -84,7 +86,7 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
);
}
Widget tabBarView() {
Widget tabBarView(bool sliver) {
return TabBarView(
controller: tabController,
children: [
@ -107,7 +109,8 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
);
}),
selectedClient: selectedActiveClient,
splitView: true
splitView: true,
sliver: sliver,
),
AddedList(
scrollController: scrollController,
@ -134,69 +137,112 @@ class _ClientsDesktopViewState extends State<ClientsDesktopView> with TickerPro
);
}
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: searchMode == true
? Row(
children: [
IconButton(
Widget title() {
if (searchMode == true) {
return Row(
children: [
IconButton(
onPressed: () {
setState(() {
searchMode = false;
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.arrow_back_rounded)
),
const SizedBox(width: 16),
Expanded(
child: TextField(
controller: searchController,
onChanged: (value) => serversProvider.setSearchTermClients(value),
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
searchMode = false;
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.arrow_back_rounded)
},
icon: const Icon(Icons.clear_rounded)
),
const SizedBox(width: 16),
Expanded(
child: TextField(
controller: searchController,
onChanged: (value) => serversProvider.setSearchTermClients(value),
decoration: InputDecoration(
suffixIcon: IconButton(
onPressed: () {
setState(() {
searchController.text = "";
serversProvider.setSearchTermClients(null);
});
},
icon: const Icon(Icons.clear_rounded)
),
hintText: AppLocalizations.of(context)!.search,
hintStyle: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
border: InputBorder.none,
),
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
),
)
],
)
: Text(AppLocalizations.of(context)!.clients),
centerTitle: false,
actions: [
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
IconButton(
onPressed: () => setState(() => searchMode = true),
icon: const Icon(Icons.search),
tooltip: AppLocalizations.of(context)!.searchClients,
hintText: AppLocalizations.of(context)!.search,
hintStyle: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
border: InputBorder.none,
),
style: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 18
),
),
const SizedBox(width: 10),
]
)
],
bottom: tabBar()
);
}
else {
return Text(AppLocalizations.of(context)!.clients);
}
}
if (!(Platform.isAndroid || Platform.isIOS)) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: title(),
centerTitle: false,
actions: [
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
IconButton(
onPressed: () => setState(() => searchMode = true),
icon: const Icon(Icons.search),
tooltip: AppLocalizations.of(context)!.searchClients,
),
const SizedBox(width: 10),
]
],
bottom: tabBar()
),
body: tabBarView(false),
),
body: tabBarView(),
),
);
);
}
else {
return DefaultTabController(
length: 2,
child: NestedScrollView(
controller: scrollController,
headerSliverBuilder: ((context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
title: title(),
pinned: true,
floating: true,
centerTitle: false,
forceElevated: innerBoxIsScrolled,
actions: [
if (serversProvider.clients.loadStatus == LoadStatus.loaded && searchMode == false) ...[
IconButton(
onPressed: () => setState(() => searchMode = true),
icon: const Icon(Icons.search),
tooltip: AppLocalizations.of(context)!.searchClients,
),
const SizedBox(width: 10),
]
],
bottom: tabBar()
),
)
];
}),
body: tabBarView(true)
)
);
}
}
}

View file

@ -18,6 +18,7 @@ class ClientsList extends StatelessWidget {
final void Function(AutoClient) onClientSelected;
final AutoClient? selectedClient;
final bool splitView;
final bool sliver;
const ClientsList({
Key? key,
@ -27,7 +28,8 @@ class ClientsList extends StatelessWidget {
required this.fetchClients,
required this.onClientSelected,
this.selectedClient,
required this.splitView
required this.splitView,
required this.sliver
}) : super(key: key);
@override
@ -36,7 +38,7 @@ class ClientsList extends StatelessWidget {
listPadding: splitView == true
? const EdgeInsets.only(top: 8)
: null,
noSliver: !(Platform.isAndroid || Platform.isIOS),
noSliver: !sliver,
loadingGenerator: () => SizedBox(
width: double.maxFinite,
height: MediaQuery.of(context).size.height-171,