note cards styling

GDSC-USTOMB · Nov 25, 2023 · 08798f3 · 08798f3
1 parent 3c192ee
commit 08798f3
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 41 deletions.
diff --git a/devtools_options.yaml b/devtools_options.yaml
@@ -0,0 +1 @@
+extensions:
diff --git a/lib/ui/screens/home_screen.dart b/lib/ui/screens/home_screen.dart
@@ -6,6 +6,7 @@ import 'package:get_it/get_it.dart';
 import 'package:go_router/go_router.dart';
 import 'package:noteapp/bloc/fetch_notes/fetch_notes_bloc.dart';
 
+import '../widgets/note_tile.dart';
 import '../widgets/square_icon_button.dart';
 import 'about_dialog.dart';
 
@@ -55,48 +56,62 @@ class _HomeScreenState extends State<HomeScreen> {
             const SizedBox(width: 24),
           ],
         ),
-        body: RefreshIndicator.adaptive(
-          key: refreshIndicatorKey,
-          onRefresh: () async {
-            bloc.add(FetchNotes());
-            bloc.stream.firstWhere(
-              (state) => state is! FetchNotesInProgress,
-            );
-          },
-          child: BlocBuilder<FetchNotesBloc, FetchNotesState>(
-            builder: (context, state) {
-              if (state is FetchNotesSuccess && state.notes.isNotEmpty) {
-                return ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: state.notes.length,
-                  itemBuilder: (context, index) {
-                    final note = state.notes[index];
-                    return ListTile(
-                      title: Text(note.title),
-                      subtitle: Text(note.content),
-                    );
-                  },
-                );
-              } else if (state is FetchNotesSuccess) {
-                return SingleChildScrollView(
-                  physics: const AlwaysScrollableScrollPhysics(),
-                  child: Container(
-                    margin: const EdgeInsets.symmetric(horizontal: 32),
-                    child: Column(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: <Widget>[
-                        const SizedBox(height: 180),
-                        Image.asset("assets/rafiki.png"),
-                        const SizedBox(height: 6),
-                        const Text('Enter your first note'),
-                      ],
-                    ),
-                  ),
-                );
-              } else {
-                return const SizedBox.shrink();
-              }
+        body: Container(
+          margin: const EdgeInsets.symmetric(horizontal: 25),
+          padding: const EdgeInsets.only(top: 30),
+          child: RefreshIndicator.adaptive(
+            key: refreshIndicatorKey,
+            onRefresh: () async {
+              bloc.add(FetchNotes());
+              bloc.stream.firstWhere(
+                (state) => state is! FetchNotesInProgress,
+              );
             },
+            child: BlocBuilder<FetchNotesBloc, FetchNotesState>(
+              builder: (context, state) {
+                if (state is FetchNotesSuccess && state.notes.isNotEmpty) {
+                  return ListView.separated(
+                    shrinkWrap: true,
+                    itemCount: state.notes.length,
+                    separatorBuilder: (context, index) => const SizedBox(
+                      height: 25,
+                    ),
+                    itemBuilder: (context, index) {
+                      const List<Color> colors = [
+                        Color(0xFFFD99FF),
+                        Color(0xFFFF9E9E),
+                        Color(0xFF91F48F),
+                        Color(0xFFFFF599),
+                        Color(0xFF9EFFFF),
+                        Color(0xFFB69CFF),
+                      ];
+                      return NoteTile(
+                        state.notes[index],
+                        cardColor: colors[index % colors.length],
+                      );
+                    },
+                  );
+                } else if (state is FetchNotesSuccess) {
+                  return SingleChildScrollView(
+                    physics: const AlwaysScrollableScrollPhysics(),
+                    child: Container(
+                      margin: const EdgeInsets.symmetric(horizontal: 32),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: <Widget>[
+                          const SizedBox(height: 180),
+                          Image.asset("assets/rafiki.png"),
+                          const SizedBox(height: 6),
+                          const Text('Enter your first note'),
+                        ],
+                      ),
+                    ),
+                  );
+                } else {
+                  return const SizedBox.shrink();
+                }
+              },
+            ),
           ),
         ),
         floatingActionButton: FloatingActionButton(

diff --git a/lib/ui/widgets/note_tile.dart b/lib/ui/widgets/note_tile.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+import '../../models/note.dart';
+
+class NoteTile extends StatelessWidget {
+  final Note note;
+  final Color cardColor;
+
+  const NoteTile(
+    this.note, {
+    required this.cardColor,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+      ),
+      color: cardColor,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: 46,
+          vertical: 22,
+        ),
+        child: Text(
+          note.title,
+          style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                color: Colors.black,
+                fontSize: 25,
+              ),
+        ),
+      ),
+    );
+  }
+}