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,37 +29,22 @@ 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
) )
).toList(), ).toList(),
), ),
const SizedBox(height: 8) const SizedBox(height: 8)
], ],
); );
}
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(

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,41 +316,39 @@ 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), child: Row(
decoration: BoxDecoration( children: [
color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null Icon(
? Colors.green serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
: Colors.orange, ? Icons.check
borderRadius: BorderRadius.circular(30) : Icons.warning,
), color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
child: Row( ? Colors.green
children: [ : Colors.orange,
Icon( ),
serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null const SizedBox(width: 10),
? Icons.check Text(
: Icons.warning, serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
color: Colors.white, ? AppLocalizations.of(context)!.connected
: AppLocalizations.of(context)!.selectedDisconnected,
style: TextStyle(
color: serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? Colors.green
: Colors.orange,
fontWeight: FontWeight.w500
),
)
],
), ),
const SizedBox(width: 10), )
Text(
serversProvider.selectedServer != null && serversProvider.selectedServer?.id == server.id && statusProvider.serverStatus != null
? AppLocalizations.of(context)!.connected
: AppLocalizations.of(context)!.selectedDisconnected,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500
),
)
],
),
)
: 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