Changed servers list design

This commit is contained in:
Juan Gilsanz Polo 2023-06-15 14:46:09 +02:00
parent c1c8ab10a0
commit 6de9f80d2b
3 changed files with 65 additions and 75 deletions

View file

@ -29,15 +29,13 @@ class ServersList extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final serversProvider = Provider.of<ServersProvider>(context); final serversProvider = Provider.of<ServersProvider>(context);
final width = MediaQuery.of(context).size.width;
if (serversProvider.serversList.isNotEmpty) { if (serversProvider.serversList.isNotEmpty) {
if (width > breakingWidth) {
return ListView( return ListView(
children: [ children: [
Wrap( Wrap(
children: serversProvider.serversList.asMap().entries.map( children: serversProvider.serversList.asMap().entries.map(
(s) => ServersTileItem( (s) => ServersTileItem(
breakingWidth: breakingWidth,
server: serversProvider.serversList[s.key], server: serversProvider.serversList[s.key],
index: s.key, index: s.key,
onChange: onChange onChange: onChange
@ -48,19 +46,6 @@ class ServersList extends StatelessWidget {
], ],
); );
} }
else {
return ListView.builder(
controller: scrollController,
itemCount: serversProvider.serversList.length,
itemBuilder: (context, index) => ServersListItem(
expandableController: controllers[index],
server: serversProvider.serversList[index],
index: index,
onChange: onChange
)
);
}
}
else { else {
return SizedBox( return SizedBox(
height: double.maxFinite, height: double.maxFinite,

View file

@ -22,12 +22,14 @@ class ServersTileItem extends StatefulWidget {
final Server server; final Server server;
final int index; final int index;
final void Function(int) onChange; final void Function(int) onChange;
final double breakingWidth;
const ServersTileItem({ const ServersTileItem({
Key? key, Key? key,
required this.server, required this.server,
required this.index, required this.index,
required this.onChange required this.onChange,
required this.breakingWidth
}) : super(key: key); }) : super(key: key);
@override @override
@ -262,12 +264,10 @@ class _ServersTileItemState extends State<ServersTileItem> with SingleTickerProv
Widget bottomRow(Server server, int index) { Widget bottomRow(Server server, int index) {
return Column( return Column(
children: [ children: [
const SizedBox(height: 20),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
PopupMenuButton( PopupMenuButton(
// color: Theme.of(context).dialogBackgroundColor,
itemBuilder: (context) => [ itemBuilder: (context) => [
PopupMenuItem( PopupMenuItem(
enabled: server.defaultServer == false enabled: server.defaultServer == false
@ -316,30 +316,27 @@ class _ServersTileItemState extends State<ServersTileItem> with SingleTickerProv
child: serversProvider.selectedServer != null && child: serversProvider.selectedServer != null &&
serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null && serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null &&
serversProvider.selectedServer?.id == server.id serversProvider.selectedServer?.id == server.id
? Container( ? Padding(
margin: const EdgeInsets.only(right: 12), padding: const EdgeInsets.only(right: 16),
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
decoration: BoxDecoration(
color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? Colors.green
: Colors.orange,
borderRadius: BorderRadius.circular(30)
),
child: Row( child: Row(
children: [ children: [
Icon( Icon(
serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? Icons.check ? Icons.check
: Icons.warning, : Icons.warning,
color: Colors.white, color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? Colors.green
: Colors.orange,
), ),
const SizedBox(width: 10), const SizedBox(width: 10),
Text( Text(
serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? AppLocalizations.of(context)!.connected ? AppLocalizations.of(context)!.connected
: AppLocalizations.of(context)!.selectedDisconnected, : AppLocalizations.of(context)!.selectedDisconnected,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? Colors.green
: Colors.orange,
fontWeight: FontWeight.w500 fontWeight: FontWeight.w500
), ),
) )
@ -348,9 +345,10 @@ class _ServersTileItemState extends State<ServersTileItem> with SingleTickerProv
) )
: Container( : Container(
margin: const EdgeInsets.only(right: 10), margin: const EdgeInsets.only(right: 10),
child: TextButton( child: FilledButton.icon(
icon: const Icon(Icons.login),
onPressed: () => connectToServer(server), onPressed: () => connectToServer(server),
child: Text(AppLocalizations.of(context)!.connect), label: Text(AppLocalizations.of(context)!.connect),
), ),
), ),
) )
@ -384,17 +382,24 @@ class _ServersTileItemState extends State<ServersTileItem> with SingleTickerProv
} }
return FractionallySizedBox( return FractionallySizedBox(
widthFactor: 0.5, widthFactor: width > widget.breakingWidth ? 0.5 : 1,
child: Card( child: Card(
margin: generateMargins(widget.index), margin: width > widget.breakingWidth
child: Padding( ? generateMargins(widget.index)
padding: const EdgeInsets.all(16), : const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
child: Column( child: Column(
children: [ children: [
topRow(widget.server, widget.index), Padding(
bottomRow(widget.server, widget.index) padding: const EdgeInsets.all(16),
], child: topRow(widget.server, widget.index),
), ),
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 16
),
child: bottomRow(widget.server, widget.index),
)
],
), ),
), ),
); );

View file

@ -94,4 +94,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
COCOAPODS: 1.11.2 COCOAPODS: 1.12.1