Enhance device management UI with improved padding and SVG icon integration

This commit is contained in:
mohammad
2025-06-10 16:29:14 +03:00
parent c6b55cb28b
commit f7f3843fa7
2 changed files with 101 additions and 64 deletions

View File

@ -51,8 +51,7 @@ class DeviceSettingsPanel extends StatelessWidget {
Container(
width: MediaQuery.of(context).size.width * 0.3,
color: ColorsManager.grey25,
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 24),
padding: const EdgeInsets.all(10),
child: ListView(
children: [
Row(
@ -70,37 +69,43 @@ class DeviceSettingsPanel extends StatelessWidget {
children: [
Text(
'Device Settings',
style:
context.theme.textTheme.titleLarge!.copyWith(
fontWeight: FontWeight.bold,
color: ColorsManager.primaryColor,
),
style: context.theme.textTheme.titleLarge!
.copyWith(
fontWeight: FontWeight.w700,
color: ColorsManager.vividBlue
.withOpacity(0.7),
fontSize: 24),
),
],
),
const SizedBox(height: 24),
DefaultContainer(
borderRadius: BorderRadius.circular(15),
child: Row(
children: [
CircleAvatar(
radius: 40,
backgroundColor:
const Color.fromARGB(177, 213, 213, 213),
Padding(
padding: const EdgeInsets.only(left: 15),
child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors,
radius: 36,
child: SvgPicture.asset(
iconPath,
fit: BoxFit.cover,
radius: 38,
backgroundColor:
ColorsManager.grayBorder.withOpacity(0.5),
child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors,
radius: 36,
child: SvgPicture.asset(
iconPath,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(width: 12),
const SizedBox(width: 25),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 15),
Text(
'Device Name:',
style: context.textTheme.bodyMedium!
@ -108,50 +113,79 @@ class DeviceSettingsPanel extends StatelessWidget {
color: ColorsManager.grayColor,
),
),
TextFormField(
maxLength: 30,
style: const TextStyle(
color: ColorsManager.blackColor,
),
textAlign: TextAlign.start,
focusNode: _bloc.focusNode,
controller: _bloc.nameController,
enabled: _bloc.editName,
onFieldSubmitted: (value) {
_bloc.add(const ChangeNameEvent(
value: false));
},
decoration: const InputDecoration(
border: InputBorder.none,
fillColor: Colors.white10,
counterText: '',
SizedBox(
height: 35,
child: Row(
children: [
SizedBox(
height: 50,
width: 190,
child: TextFormField(
scrollPadding: EdgeInsets.zero,
maxLength: 30,
style: const TextStyle(
color: ColorsManager.blackColor,
fontSize: 16,
),
textAlign: TextAlign.start,
focusNode: _bloc.focusNode,
controller: _bloc.nameController,
enabled: _bloc.editName,
onFieldSubmitted: (value) {
_bloc.add(const ChangeNameEvent(
value: false));
},
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
fillColor: Colors.white10,
counterText: '',
),
),
),
Column(
children: [
SizedBox(
width: 15,
height: 25,
child: Visibility(
visible:
_bloc.editName != true,
replacement: const SizedBox(),
child: InkWell(
onTap: () {
_bloc.add(
const ChangeNameEvent(
value: true));
},
child: SvgPicture.asset(
Assets
.editNameIconSettings,
color: ColorsManager
.lightGrayBorderColor,
height: 15,
width: 15,
),
),
),
),
],
),
],
),
),
],
),
),
const SizedBox(width: 8),
Visibility(
visible: _bloc.editName != true,
replacement: const SizedBox(),
child: GestureDetector(
onTap: () {
_bloc.add(
const ChangeNameEvent(value: true));
},
child: SvgPicture.asset(
Assets.editNameIconSettings,
color: ColorsManager.grayColor,
height: 20,
width: 20,
),
),
)
],
),
),
const SizedBox(height: 32),
Text('Device Management', style: sectionTitle),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text('Device Management', style: sectionTitle),
),
DeviceManagementContent(
device: device,
subSpaces: subSpaces.cast<SubSpaceModel>(),