How to Create a Mental Health Tracking and Support App in FlutterFlow

Create a mood_entries collection with fields: userId (String), mood (Integer, 1-5 scale), note (String, optional), activities (String Array), timestamp (Timestamp). Create a journal_entries collection with: userId (String), title (String), body (String), mood (Integer, optional), isPrivate (Boolean, default true), timestamp (Timestamp). Create a resources collection with: title (String), type (String: 'article', 'exercise', 'hotline'), content (String), category (String), order (Integer). Add strict Firestore Security Rules: users can only create, read, update, and delete their own entries where resource.data.userId == request.auth.uid.

Create a CheckInPage with a Column layout. Add a greeting Text ('How are you feeling today?', headlineMedium). Below, add a Row of five IconButtons representing mood levels: 1 (very sad face), 2 (sad face), 3 (neutral face), 4 (happy face), 5 (very happy face). Use Page State selectedMood to track the selection and highlight the selected emoji with a colored circular Container background. Below the emojis, add ChoiceChips for activities: Exercise, Sleep, Social, Work, Nature, Reading, Meditation. Add a TextField (multiline, 3 lines, hint: 'Add a note about your day...') for optional context. Finally, a Save Button that creates a mood_entries document with all values and navigates to the dashboard.

Create a MoodChart Custom Widget using the fl_chart package. Accept parameters: moodData (List of JSON with mood and date). Render a LineChart with dates on the x-axis and mood (1-5) on the y-axis. Color the line with a gradient from red (1) through yellow (3) to green (5). Add dot indicators at each data point. On the dashboard page, query mood_entries for the current user, ordered by timestamp descending, limited by the selected time range (7, 30, or 90 days via ChoiceChips). Pass the query results to the MoodChart widget. Display the average mood as a Text below the chart.

1// Custom Widget: MoodChart
2import 'package:fl_chart/fl_chart.dart';
3
4class MoodChart extends StatelessWidget {
5  final List<Map<String, dynamic>> moodData;
6  const MoodChart({required this.moodData});
7
8  @override
9  Widget build(BuildContext context) {
10    final spots = moodData.asMap().entries.map((e) =>
11      FlSpot(e.key.toDouble(), e.value['mood'].toDouble())
12    ).toList();
13
14    return LineChart(LineChartData(
15      minY: 1, maxY: 5,
16      gridData: FlGridData(show: true),
17      titlesData: FlTitlesData(
18        leftTitles: AxisTitles(sideTitles: SideTitles(
19          showTitles: true, reservedSize: 30,
20          getTitlesWidget: (v, _) => Text(
21            ['', '😢', '😟', '😐', '😊', '😄'][v.toInt()],
22            style: TextStyle(fontSize: 14)),
23        )),
24      ),
25      lineBarsData: [LineChartBarData(
26        spots: spots, isCurved: true,
27        gradient: LinearGradient(
28          colors: [Colors.red, Colors.amber, Colors.green]),
29        dotData: FlDotData(show: true),
30        belowBarData: BarAreaData(
31          show: true,
32          gradient: LinearGradient(
33            colors: [Colors.green.withOpacity(0.1),
34                     Colors.red.withOpacity(0.1)],
35            begin: Alignment.topCenter,
36            end: Alignment.bottomCenter)),
37      )],
38    ));
39  }
40}

Create a JournalPage with a Column: a header Row with Text ('Journal') and an Add IconButton. Below, a ListView with Backend Query on journal_entries filtered by userId == currentUser.uid, ordered by timestamp descending. Each row shows a Container with: title Text, first 100 characters of body as preview Text, mood emoji (if set), and timestamp. Tap a row to navigate to JournalDetailPage. Create a JournalEditorPage with: title TextField, body TextField (multiline, minLines: 10), optional mood selector (same 5 emoji Row), and Save Button. Save creates or updates a journal_entries document. Add a Delete action on the detail page with a confirmation dialog.

Create a ResourcesPage with a Column. At the very top, add a prominent Container with red background, white Text ('Crisis Helpline: 988'), and a phone Icon. On tap, use Launch URL action with 'tel:988' to dial the Suicide and Crisis Lifeline. Below, add ChoiceChips for resource categories: Articles, Exercises, Hotlines, All. Add a ListView with Backend Query on resources filtered by the selected category, ordered by the order field. Each resource row shows: type icon (article, exercise, phone), title Text, and a preview of content. Tap to open a ResourceDetailPage showing the full content.

Create a DashboardPage as the app home. Use a SingleChildScrollView with a Column. Add: a greeting Text with the user name and today date, the daily check-in prompt Container (tap navigates to CheckInPage, with Conditional Visibility hidden if already checked in today), the MoodChart Custom Widget with time range ChoiceChips (7/30/90 days), a Row of stat Containers (average mood this week, current streak of check-ins, total journal entries), and a 'Recent Journal Entries' horizontal ListView showing the last 3 entries. Add bottom navigation tabs: Dashboard, Check-In, Journal, Resources.