Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1c56895

Browse files
authored
Merge pull request #22 from headlines-toolkit/refactor_dashobard_ui_polish
Refactor dashobard UI polish
2 parents b714841 + 908bf05 commit 1c56895

File tree

1 file changed

+95
-55
lines changed

1 file changed

+95
-55
lines changed

‎lib/dashboard/view/dashboard_page.dart‎

Lines changed: 95 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -58,41 +58,62 @@ class _DashboardPageState extends State<DashboardPage> {
5858
return ListView(
5959
padding: const EdgeInsets.all(AppSpacing.lg),
6060
children: [
61-
Wrap(
62-
spacing: AppSpacing.lg,
63-
runSpacing: AppSpacing.lg,
64-
children: [
65-
_SummaryCard(
66-
icon: Icons.article_outlined,
67-
title: l10n.totalHeadlines,
68-
value: summary.headlineCount.toString(),
69-
),
70-
_SummaryCard(
71-
icon: Icons.category_outlined,
72-
title: l10n.totalCategories,
73-
value: summary.categoryCount.toString(),
74-
),
75-
_SummaryCard(
76-
icon: Icons.source_outlined,
77-
title: l10n.totalSources,
78-
value: summary.sourceCount.toString(),
79-
),
80-
],
61+
LayoutBuilder(
62+
builder: (context, constraints) {
63+
const tabletBreakpoint = 800;
64+
final isNarrow = constraints.maxWidth < tabletBreakpoint;
65+
66+
final summaryCards = [
67+
_SummaryCard(
68+
icon: Icons.article_outlined,
69+
title: l10n.totalHeadlines,
70+
value: summary.headlineCount.toString(),
71+
),
72+
_SummaryCard(
73+
icon: Icons.category_outlined,
74+
title: l10n.totalCategories,
75+
value: summary.categoryCount.toString(),
76+
),
77+
_SummaryCard(
78+
icon: Icons.source_outlined,
79+
title: l10n.totalSources,
80+
value: summary.sourceCount.toString(),
81+
),
82+
];
83+
84+
if (isNarrow) {
85+
return Column(
86+
crossAxisAlignment: CrossAxisAlignment.stretch,
87+
children: [
88+
summaryCards[0],
89+
const SizedBox(height: AppSpacing.lg),
90+
summaryCards[1],
91+
const SizedBox(height: AppSpacing.lg),
92+
summaryCards[2],
93+
],
94+
);
95+
}
96+
return Row(
97+
crossAxisAlignment: CrossAxisAlignment.start,
98+
children: [
99+
Expanded(child: summaryCards[0]),
100+
const SizedBox(width: AppSpacing.lg),
101+
Expanded(child: summaryCards[1]),
102+
const SizedBox(width: AppSpacing.lg),
103+
Expanded(child: summaryCards[2]),
104+
],
105+
);
106+
},
81107
),
82108
const SizedBox(height: AppSpacing.lg),
83-
Row(
84-
crossAxisAlignment: CrossAxisAlignment.start,
85-
children: [
86-
Expanded(
87-
flex: 2,
88-
child: _RecentHeadlinesCard(
89-
headlines: recentHeadlines,
90-
),
91-
),
92-
const SizedBox(width: AppSpacing.lg),
93-
Expanded(
94-
flex: 1,
95-
child: Column(
109+
LayoutBuilder(
110+
builder: (context, constraints) {
111+
const wideBreakpoint = 1200;
112+
final isWide = constraints.maxWidth > wideBreakpoint;
113+
114+
final mainContent = [
115+
_RecentHeadlinesCard(headlines: recentHeadlines),
116+
Column(
96117
children: [
97118
_SystemStatusCard(
98119
status: appConfig.appOperationalStatus,
@@ -101,8 +122,28 @@ class _DashboardPageState extends State<DashboardPage> {
101122
const _QuickActionsCard(),
102123
],
103124
),
104-
),
105-
],
125+
];
126+
127+
if (isWide) {
128+
return Row(
129+
crossAxisAlignment: CrossAxisAlignment.start,
130+
children: [
131+
Expanded(flex: 2, child: mainContent[0]),
132+
const SizedBox(width: AppSpacing.lg),
133+
Expanded(flex: 1, child: mainContent[1]),
134+
],
135+
);
136+
}
137+
138+
return Column(
139+
crossAxisAlignment: CrossAxisAlignment.stretch,
140+
children: [
141+
mainContent[0],
142+
const SizedBox(height: AppSpacing.lg),
143+
mainContent[1],
144+
],
145+
);
146+
},
106147
),
107148
],
108149
);
@@ -193,34 +234,33 @@ class _QuickActionsCard extends StatelessWidget {
193234
child: Padding(
194235
padding: const EdgeInsets.all(AppSpacing.lg),
195236
child: Column(
196-
crossAxisAlignment: CrossAxisAlignment.start,
237+
crossAxisAlignment: CrossAxisAlignment.stretch,
197238
children: [
198239
Text(l10n.quickActions, style: theme.textTheme.titleLarge),
199240
const SizedBox(height: AppSpacing.md),
200-
SizedBox(
201-
width: double.infinity,
202-
child: ElevatedButton.icon(
203-
icon: const Icon(Icons.add_circle_outline),
204-
label: Text(l10n.createHeadlineAction),
205-
onPressed: () => context.goNamed(Routes.createHeadlineName),
206-
),
241+
ElevatedButton.icon(
242+
icon: const Icon(Icons.add_circle_outline),
243+
label: Text(l10n.createHeadlineAction),
244+
onPressed: () => context.goNamed(Routes.createHeadlineName),
207245
),
208246
const SizedBox(height: AppSpacing.sm),
209-
SizedBox(
210-
width: double.infinity,
211-
child: OutlinedButton.icon(
212-
icon: const Icon(Icons.folder_open_outlined),
213-
label: Text(l10n.manageContentAction),
214-
onPressed: () => context.goNamed(Routes.contentManagementName),
247+
ElevatedButton.icon(
248+
icon: const Icon(Icons.create_new_folder_outlined),
249+
label: Text(l10n.createCategory),
250+
onPressed: () => context.goNamed(Routes.createCategoryName),
251+
style: ElevatedButton.styleFrom(
252+
backgroundColor: theme.colorScheme.secondaryContainer,
253+
foregroundColor: theme.colorScheme.onSecondaryContainer,
215254
),
216255
),
217256
const SizedBox(height: AppSpacing.sm),
218-
SizedBox(
219-
width: double.infinity,
220-
child: OutlinedButton.icon(
221-
icon: const Icon(Icons.settings_applications_outlined),
222-
label: Text(l10n.appConfigAction),
223-
onPressed: () => context.goNamed(Routes.appConfigurationName),
257+
ElevatedButton.icon(
258+
icon: const Icon(Icons.add_to_photos_outlined),
259+
label: Text(l10n.createSource),
260+
onPressed: () => context.goNamed(Routes.createSourceName),
261+
style: ElevatedButton.styleFrom(
262+
backgroundColor: theme.colorScheme.secondaryContainer,
263+
foregroundColor: theme.colorScheme.onSecondaryContainer,
224264
),
225265
),
226266
],

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /