Skip to content

Commit

Permalink
feat: Added the Aspect ratio in the badge UI and updated the custom p…
Browse files Browse the repository at this point in the history 
…ainter for the badge UI. (#1147)
  • Loading branch information
@Jhalakupadhyay
Jhalakupadhyay authored Jan 6, 2025
1 parent 60773d7 commit 777ef9f
Show file tree
Hide file tree
Showing 8 changed files with 579 additions and 426 deletions.
38 changes: 38 additions & 0 deletions lib/bademagic_module/utils/badge_utils.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import 'package:flutter/material.dart';

class BadgeUtils {
MapEntry<double, double> getBadgeOffsetBackground(Size size) {
var paddingPercentage = 5.0;
var offsetHeightBadgeBackground = (paddingPercentage / 100) * size.height;
var offsetWidthBadgeBackground = (paddingPercentage / 100) * size.width;
return MapEntry(offsetHeightBadgeBackground, offsetWidthBadgeBackground);
}

MapEntry<double, double> getBadgeSize(double offsetHeightBadgeBackground,
double offsetWidthBadgeBackground, Size size) {
var badgeHeight = size.height - (2 * offsetHeightBadgeBackground);
var badgeWidth = size.width - (2 * offsetWidthBadgeBackground);
return MapEntry(badgeHeight, badgeWidth);
}

MapEntry<double, double> getCellStartCoordinate(
double offsetWidthBadgeBackground,
double offsetHeightBadgeBackground,
double badgeWidth,
double badgeHeight) {
{
var cellSize = badgeWidth / 44;

// Calculate offsets to center the cells within the rectangle
double totalCellsWidth = (cellSize * 0.92) * 44;
double totalCellsHeight = cellSize * 11;

var cellStartX =
offsetWidthBadgeBackground + (badgeWidth - totalCellsWidth) / 2;
var cellStartY =
offsetHeightBadgeBackground + (badgeHeight - totalCellsHeight) / 2;

return MapEntry(cellStartX, cellStartY);
}
}
}
250 changes: 133 additions & 117 deletions lib/view/draw_badge_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import 'package:badgemagic/view/widgets/common_scaffold_widget.dart';
import 'package:badgemagic/virtualbadge/view/draw_badge.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DrawBadge extends StatefulWidget {
final String? filename;
Expand Down Expand Up @@ -52,127 +51,144 @@ class _DrawBadgeState extends State<DrawBadge> {
return CommonScaffold(
index: 1,
title: 'BadgeMagic',
body: Column(
children: [
Expanded(
child: Container(
margin: EdgeInsets.symmetric(vertical: 20.h, horizontal: 20.w),
padding: EdgeInsets.all(10.dg),
height: 390.h,
width: 500.w,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(10),
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
key: const Key(drawBadgeScreen),
child: Align(
alignment: Alignment.center,
child: LayoutBuilder(
builder: (context, constraints) => Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth * 0.94,
),
child: BMBadge(
providerInit: (provider) => drawToggle = provider,
badgeGrid: widget.badgeGrid
?.map((e) => e.map((e) => e == 1).toList())
.toList(),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
setState(() {
drawToggle.toggleIsDrawing(true);
});
},
child: Column(
children: [
Icon(
Icons.edit,
color:
drawToggle.getIsDrawing() ? Colors.red : Colors.black,
),
Text(
'Draw',
style: TextStyle(
color: drawToggle.isDrawing ? Colors.red : Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
SizedBox(
width: 100,
),
)
],
),
),
TextButton(
onPressed: () {
setState(() {
drawToggle.toggleIsDrawing(false);
});
},
child: Column(
children: [
Icon(
Icons.delete,
color: drawToggle.isDrawing ? Colors.black : Colors.red,
),
Text(
'Erase',
style: TextStyle(
color: drawToggle.isDrawing ? Colors.black : Colors.red,
BMBadge(
providerInit: (provider) => drawToggle = provider,
badgeGrid: widget.badgeGrid
?.map((e) => e.map((e) => e == 1).toList())
.toList(),
),
)
],
),
),
TextButton(
onPressed: () {
setState(() {
drawToggle.resetDrawViewGrid();
});
},
child: const Column(
children: [
Icon(
Icons.refresh,
color: Colors.black,
),
Text(
'Reset',
style: TextStyle(color: Colors.black),
)
],
),
),
TextButton(
onPressed: () {
List<List<int>> badgeGrid = drawToggle
.getDrawViewGrid()
.map((e) => e.map((e) => e ? 1 : 0).toList())
.toList();
List<String> hexString =
Converters.convertBitmapToLEDHex(badgeGrid, true);
widget.isSavedCard!
? fileHelper.updateBadgeText(
widget.filename!,
hexString,
)
: widget.isSavedClipart!
? fileHelper.updateClipart(
widget.filename!, badgeGrid)
: fileHelper.saveImage(drawToggle.getDrawViewGrid());
fileHelper.generateClipartCache();
ToastUtils().showToast("Clipart Saved Successfully");
},
child: const Column(
children: [
Icon(
Icons.save,
color: Colors.black,
),
Text('Save', style: TextStyle(color: Colors.black))
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
setState(() {
drawToggle.toggleIsDrawing(true);
});
},
child: Column(
children: [
Icon(
Icons.edit,
color: drawToggle.getIsDrawing()
? Colors.red
: Colors.black,
),
Text(
'Draw',
style: TextStyle(
color: drawToggle.isDrawing
? Colors.red
: Colors.black,
),
)
],
),
),
TextButton(
onPressed: () {
setState(() {
drawToggle.toggleIsDrawing(false);
});
},
child: Column(
children: [
Icon(
Icons.delete,
color: drawToggle.isDrawing
? Colors.black
: Colors.red,
),
Text(
'Erase',
style: TextStyle(
color: drawToggle.isDrawing
? Colors.black
: Colors.red,
),
)
],
),
),
TextButton(
onPressed: () {
setState(() {
drawToggle.resetDrawViewGrid();
});
},
child: const Column(
children: [
Icon(
Icons.refresh,
color: Colors.black,
),
Text(
'Reset',
style: TextStyle(color: Colors.black),
)
],
),
),
TextButton(
onPressed: () {
List<List<int>> badgeGrid = drawToggle
.getDrawViewGrid()
.map((e) => e.map((e) => e ? 1 : 0).toList())
.toList();
List<String> hexString =
Converters.convertBitmapToLEDHex(
badgeGrid, false);
widget.isSavedCard!
? fileHelper.updateBadgeText(
widget.filename!,
hexString,
)
: widget.isSavedClipart!
? fileHelper.updateClipart(
widget.filename!, badgeGrid)
: fileHelper
.saveImage(drawToggle.getDrawViewGrid());
fileHelper.generateClipartCache();
ToastUtils().showToast("Clipart Saved Successfully");
},
child: const Column(
children: [
Icon(
Icons.save,
color: Colors.black,
),
Text('Save', style: TextStyle(color: Colors.black))
],
),
),
],
),
],
),
],
)
],
),
),
),
),
key: const Key(drawBadgeScreen),
);
}
}
Loading

0 comments on commit 777ef9f

Please sign in to comment.