Skip to content

Commit e980564

Browse files
SembaukeSembauke
committed
refactor: improve block view layout and challenge display logic
1 parent eb60c76 commit e980564

File tree

1 file changed

+88
-77
lines changed

1 file changed

+88
-77
lines changed

‎mobile-app/lib/ui/views/learn/block/block_view.dart‎

Lines changed: 88 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,18 @@ class BlockView extends StatelessWidget {
5151
child: Column(
5252
children: [
5353
Row(
54-
mainAxisAlignment: MainAxisAlignment.start,
5554
crossAxisAlignment: CrossAxisAlignment.start,
5655
children: [
5756
const Padding(
58-
padding: EdgeInsets.symmetric(
59-
horizontal: 8,
60-
),
57+
padding: EdgeInsets.all(8),
6158
child: Icon(
62-
Icons.heat_pump_rounded,
63-
color: Colors.blue,
59+
Icons.monitor,
60+
color: Color.fromRGBO(0x19, 0x8e, 0xee, 1),
6461
size: 40,
6562
),
6663
),
6764
Expanded(
6865
child: Column(
69-
mainAxisAlignment: MainAxisAlignment.start,
7066
crossAxisAlignment: CrossAxisAlignment.start,
7167
children: [
7268
Text(
@@ -78,85 +74,100 @@ class BlockView extends StatelessWidget {
7874
fontWeight: FontWeight.bold,
7975
),
8076
),
77+
if (block.challenges.length == 1)
78+
Text(block.description.join()),
79+
if (block.challenges.length > 1)
80+
Row(
81+
mainAxisAlignment: MainAxisAlignment.start,
82+
children: [
83+
Padding(
84+
padding: const EdgeInsets.symmetric(
85+
vertical: 4,
86+
),
87+
child: TextButton(
88+
onPressed: () {
89+
model.setIsOpen = !model.isOpen;
90+
},
91+
style: TextButton.styleFrom(
92+
backgroundColor: const Color.fromRGBO(
93+
0x1b, 0x1b, 0x32, 1),
94+
shape: RoundedRectangleBorder(
95+
borderRadius: BorderRadius.circular(5),
96+
side: const BorderSide(
97+
color: Color.fromRGBO(
98+
0x3b, 0x3b, 0x4f, 1),
99+
),
100+
),
101+
),
102+
child: Text(
103+
model.isOpen
104+
? 'Hide Steps'
105+
: 'Show Steps',
106+
),
107+
),
108+
),
109+
],
110+
),
111+
if (model.isOpen)
112+
Row(
113+
mainAxisAlignment: MainAxisAlignment.start,
114+
crossAxisAlignment: CrossAxisAlignment.start,
115+
children: [
116+
SizedBox(
117+
height: 195,
118+
width:
119+
MediaQuery.of(context).size.width - 100,
120+
child: GridView.builder(
121+
gridDelegate:
122+
const SliverGridDelegateWithFixedCrossAxisCount(
123+
crossAxisCount: 6,
124+
mainAxisExtent: 35,
125+
mainAxisSpacing: 3,
126+
crossAxisSpacing: 3),
127+
itemCount: block.challenges.length,
128+
itemBuilder: (context, step) {
129+
return ChallengeTile(
130+
block: block,
131+
model: model,
132+
step: step + 1,
133+
challengeId:
134+
block.challengeTiles[step].id,
135+
isDowloaded: false,
136+
);
137+
},
138+
),
139+
),
140+
],
141+
),
81142
],
82143
),
83144
),
84145
],
85146
),
86-
Row(
87-
mainAxisAlignment: MainAxisAlignment.start,
88-
children: [
89-
Padding(
90-
padding: const EdgeInsets.all(8.0),
91-
child: TextButton(
92-
onPressed: () {},
93-
style: TextButton.styleFrom(
94-
backgroundColor:
95-
const Color.fromRGBO(0x1b, 0x1b, 0x32, 1),
96-
shape: RoundedRectangleBorder(
97-
borderRadius: BorderRadius.circular(8),
98-
side: const BorderSide(
99-
color: Color.fromRGBO(0x3b, 0x3b, 0x4f, 1),
147+
if (block.challenges.length == 1)
148+
Row(
149+
children: [
150+
Expanded(
151+
child: Padding(
152+
padding: const EdgeInsets.all(8.0),
153+
child: TextButton(
154+
onPressed: () {},
155+
style: TextButton.styleFrom(
156+
backgroundColor:
157+
const Color.fromRGBO(0x5a, 0x01, 0xa7, 1),
158+
shape: RoundedRectangleBorder(
159+
borderRadius: BorderRadius.circular(5),
160+
),
161+
),
162+
child: const Text(
163+
'Start',
164+
style: TextStyle(fontWeight: FontWeight.bold),
100165
),
101166
),
102167
),
103-
child: Text(
104-
model.isOpen ? 'Hide Steps' : 'Show Steps',
105-
),
106-
),
107-
),
108-
],
109-
),
110-
Row(
111-
mainAxisAlignment: MainAxisAlignment.start,
112-
crossAxisAlignment: CrossAxisAlignment.start,
113-
children: [
114-
Container(
115-
padding:
116-
const EdgeInsets.only(left: 8, top: 8, bottom: 8),
117-
height: 200,
118-
width: MediaQuery.of(context).size.width - 45,
119-
child: GridView.builder(
120-
gridDelegate:
121-
const SliverGridDelegateWithFixedCrossAxisCount(
122-
crossAxisCount: 4,
123-
mainAxisExtent: 35,
124-
mainAxisSpacing: 3,
125-
crossAxisSpacing: 3),
126-
itemCount: block.challenges.length,
127-
itemBuilder: (context, step) {
128-
return ChallengeTile(
129-
block: block,
130-
model: model,
131-
step: step + 1,
132-
challengeId: block.challengeTiles[step].id,
133-
isDowloaded: false,
134-
);
135-
},
136-
),
137-
),
138-
],
139-
),
140-
Row(
141-
children: [
142-
Expanded(
143-
child: TextButton(
144-
onPressed: () {},
145-
style: TextButton.styleFrom(
146-
backgroundColor:
147-
const Color.fromRGBO(0x5a, 0x01, 0xa7, 1),
148-
shape: RoundedRectangleBorder(
149-
borderRadius: BorderRadius.circular(8),
150-
),
151-
),
152-
child: const Text(
153-
'Start',
154-
style: TextStyle(fontWeight: FontWeight.bold),
155-
),
156168
),
157-
),
158-
],
159-
)
169+
],
170+
)
160171
],
161172
),
162173
),

0 commit comments

Comments
 (0)