Skip to content

Commit

Permalink
make UI adaptive according to device (#86)
Browse files Browse the repository at this point in the history 
* make UI adaptive according to device

* fix formatting

* fix lint

* fix formatting
  • Loading branch information
@asimfarooq5
asimfarooq5 authored Dec 18, 2024
1 parent d4abbd7 commit 84a46b2
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 144 deletions.
138 changes: 60 additions & 78 deletions lib/app/modules/action/action_view.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import "dart:io";

import "package:flutter/foundation.dart";
import "package:flutter/material.dart";
import "package:get/get.dart";
Expand Down Expand Up @@ -43,23 +41,34 @@ class ActionView extends StatelessWidget {
_buildLogsWindow(),
const SizedBox(height: 8),
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: _buildArgsTab(),
),
const SizedBox(width: 8),
Expanded(
child: _buildKwargsTab(),
),
],
),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth >= 800) {
// Desktop/Web layout
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: _buildArgsTab(),
),
const SizedBox(width: 8),
Expanded(
child: _buildKwargsTab(),
),
],
);
} else {
// Mobile/Tablet layout
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildArgsTab(),
const SizedBox(height: 8),
_buildKwargsTab(),
],
);
}
},
),
),
],
Expand All @@ -69,7 +78,8 @@ class ActionView extends StatelessWidget {
}

Widget _buildUriBar() {
final bool isMobile = Platform.isAndroid || Platform.isIOS;
final bool isMobile =
!kIsWeb && (defaultTargetPlatform == TargetPlatform.android || defaultTargetPlatform == TargetPlatform.iOS);

return Form(
key: _formKey,
Expand All @@ -82,7 +92,7 @@ class ActionView extends StatelessWidget {
child: Column(
children: isMobile
? [
// First row: URI
// URI Input Field (Mobile/Web layout)
TextFormField(
controller: uriController,
decoration: const InputDecoration(
Expand All @@ -92,10 +102,9 @@ class ActionView extends StatelessWidget {
validator: (value) => value == null || value.isEmpty ? "URI cannot be empty." : null,
),
const SizedBox(height: 8),
// Second row: Profile and WAMP Method
// Profile and WAMP Method Row
Row(
children: [
// Profile Dropdown
Expanded(
flex: 2,
child: Obx(() {
Expand Down Expand Up @@ -164,10 +173,9 @@ class ActionView extends StatelessWidget {
),
]
: [
// Desktop and Web Layout: Single Row
// Desktop Layout (no mobile-specific behavior)
Row(
children: [
// Profile Dropdown
Expanded(
flex: 2,
child: Obx(() {
Expand Down Expand Up @@ -312,6 +320,7 @@ class ActionView extends StatelessWidget {
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Expand All @@ -329,11 +338,11 @@ class ActionView extends StatelessWidget {
Row(
children: [
Expanded(
flex: 2,
child: TextField(
decoration: InputDecoration(
labelText: "Key ${i + 1}",
border: const OutlineInputBorder(),
child: TextFormField(
initialValue: kwargsController.tableData[i].key,
decoration: const InputDecoration(
labelText: "Key",
border: OutlineInputBorder(),
),
onChanged: (value) {
final updatedEntry = MapEntry(
Expand All @@ -346,16 +355,16 @@ class ActionView extends StatelessWidget {
),
const SizedBox(width: 8),
Expanded(
flex: 3,
child: TextField(
decoration: InputDecoration(
labelText: "Value ${i + 1}",
border: const OutlineInputBorder(),
child: TextFormField(
initialValue: kwargsController.tableData[i].value,
decoration: const InputDecoration(
labelText: "Value",
border: OutlineInputBorder(),
),
onChanged: (value) {
final updatedEntry = MapEntry(
kwargsController.tableData[i].key,
value,
kwargsController.tableData[i].value,
);
kwargsController.updateRow(i, updatedEntry);
},
Expand All @@ -376,15 +385,9 @@ class ActionView extends StatelessWidget {

Widget _buildLogsWindow() {
return Obx(() {
WidgetsBinding.instance.addPostFrameCallback((_) async {
if (_scrollController.hasClients) {
await _scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
);
}
});
final Orientation orientation = MediaQuery.of(Get.context!).orientation;
final double screenHeight = MediaQuery.of(Get.context!).size.height;
final double logsHeight = orientation == Orientation.portrait ? screenHeight * 0.25 : screenHeight * 0.4;

return Container(
padding: const EdgeInsets.all(8),
Expand All @@ -404,12 +407,13 @@ class ActionView extends StatelessWidget {
),
),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(8),
height: 150,
child: SingleChildScrollView(
SizedBox(
height: logsHeight,
child: ListView(
controller: _scrollController,
child: Text(actionController.logsMessage.value),
children: [
Text(actionController.logsMessage.value),
],
),
),
],
Expand All @@ -422,33 +426,11 @@ class ActionView extends StatelessWidget {
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(
DiagnosticsProperty<ActionController>(
"actionController",
actionController,
),
)
..add(IterableProperty<String>("wampMethods", wampMethods))
..add(
DiagnosticsProperty<TextEditingController>(
"uriController",
uriController,
),
)
..add(
DiagnosticsProperty<ArgsController>("argsController", argsController),
)
..add(
DiagnosticsProperty<ProfileController>(
"profileController",
profileController,
),
)
..add(
DiagnosticsProperty<KwargsController>(
"kwargsController",
kwargsController,
),
);
..add(DiagnosticsProperty<ActionController>("actionController", actionController))
..add(DiagnosticsProperty<ProfileController>("profileController", profileController))
..add(DiagnosticsProperty<ArgsController>("argsController", argsController))
..add(DiagnosticsProperty<TextEditingController>("uriController", uriController))
..add(DiagnosticsProperty<KwargsController>("kwargsController", kwargsController))
..add(IterableProperty<String>("wampMethods", wampMethods));
}
}
101 changes: 55 additions & 46 deletions lib/app/modules/profile/profile_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,64 @@ class ProfileView extends StatelessWidget {
Widget build(BuildContext context) {
return ResponsiveScaffold(
body: Obx(() {
return ListView.builder(
itemCount: controller.profiles.length,
itemBuilder: (context, index) {
final profile = controller.profiles[index];

return ListTile(
title: Text(
profile.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Realm: ${profile.realm}"),
Text("URL: ${profile.url}"),
Text("Auth ID: ${profile.authid}"),
Text("Auth Method: ${profile.authmethod}"),
Text("Serializer: ${profile.serializer}"),
],
),
isThreeLine: true,
trailing: Obx(() {
bool isConnected = controller.connectedProfiles.contains(profile);
return Row(
mainAxisSize: MainAxisSize.min,
return controller.profiles.isEmpty
? const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () async {
await controller.createProfile(profile: profile);
},
),
IconButton(
icon: Icon(isConnected ? Icons.stop : Icons.play_arrow),
onPressed: () async => controller.toggleConnection(profile),
Text("No profiles created yet."),
],
),
)
: ListView.builder(
itemCount: controller.profiles.length,
itemBuilder: (context, index) {
final profile = controller.profiles[index];

return ListTile(
title: Text(
profile.name,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () async => controller.deleteProfile(profile),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Realm: ${profile.realm}"),
Text("URL: ${profile.url}"),
Text("Auth ID: ${profile.authid}"),
Text("Auth Method: ${profile.authmethod}"),
Text("Serializer: ${profile.serializer}"),
],
),
],
);
}),
);
},
);
isThreeLine: true,
trailing: Obx(() {
bool isConnected = controller.connectedProfiles.contains(profile);
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () async {
await controller.createProfile(profile: profile);
},
),
IconButton(
icon: Icon(isConnected ? Icons.stop : Icons.play_arrow),
onPressed: () async => controller.toggleConnection(profile),
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () async => controller.deleteProfile(profile),
),
],
);
}),
);
},
);
}),
floatingActionButton: FloatingActionButton(
backgroundColor: DarkThemeColors.primaryColor,
Expand Down
17 changes: 15 additions & 2 deletions lib/utils/main_drawer.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,24 @@ class MainDrawer extends StatelessWidget {

@override
Widget build(BuildContext context) {
return SizedBox(
width: isSidebar ? 250 : null,
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
if (!isSidebar)
DrawerHeader(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
),
child: Text(
"Wick", // Replace with your actual app title
style: TextStyle(
color: Theme.of(context).primaryTextTheme.titleLarge?.color,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
ListTile(
leading: const Icon(Icons.person),
title: const Text("Profile"),
Expand Down
Loading

0 comments on commit 84a46b2

Please sign in to comment.