Creating A Simple Note Taking App Using Flutter

#flutter #tutorial #beginners #development

Introduction

Hello! 😎
Sorry about the post update delay, recently I've been busy with work, life and various other projects.

In this tutorial, I will show you how to create a simple memo-taking app using Flutter.

Prerequisites

Before we start, make sure that you have Flutter and Dart set up on your development machine.
You can follow the installation guide from the official Flutter documentation:
https://flutter.dev/docs/get-started/install

Creating The Project

First we need to create the flutter project. Open up your terminal and run the following command:

flutter create memo_app

Then navigate to the newly created project

cd memo_app

Creating The Memo App

Once the project is set up, open it in your favourite code editor. You should see a "lib" directory inside it, there should be a "main.dart" file. This is the starting point of your flutter app.

First we need to import Flutter's Material Design package which provides us with a large number or pre-designed components.

import 'package:flutter/material.dart';

Next we need to define Main function which is the starting point for flutter app. We will call runApp() inside this function and pass an instance of MyApp(), which serves as our widget tree.

void main() {
  runApp(const MyApp());
}

Next, we will define the MyApp widget, which is a "StatelessWidget". This serves as the root of your app. Inside, it returns a "MaterialApp" widget, which provides a number of widgets that conform to Material Design guidelines.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Memo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),  
      home: const MyHomePage(title: 'My Memo App'),
    );  
  }
}

After this, we create the MyHomePage widget, which is a "StatefulWidget" that serves as the home screen of our app. It returns an instance of "_MyHomePageState", which is what we will be creating next.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Finally, we create the "_MyHomePageState" class, which is where the state of the "MyHomePage" widget is stored. It contains a like of memos, a text controller and a method to add memos to the list.

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _memos = [];
  final _textController = TextEditingController();

  void _addMemo() {
    if (_textController.text.isNotEmpty) {
      setState(() {
        _memos.add(_textController.text);
        _textController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: _textController,
            decoration: const InputDecoration(
              hintText: 'Enter a memo',
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _memos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_memos[index]),
                );
              },
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addMemo,
        tooltip: 'Add Memo',
        child: const Icon(Icons.add),
      ),
    );
  }
}

The app is built within the "build" method of the above. It returns a "Scaffold" widget, which acts as the structural layout of the application. The scaffold has an "AppBar", "Column" containing a "TextField" and a "ListView" widget, and a "FloatingActionButton" for submission.

Done! Now we can finally run the app. 😄

Running The App

Now that we have created the app it's time to run it. Open up a terminal and run the following command:

flutter run

You should then see something like the following screenshot: (I've added some memos)

You now have a basic memo app created with Flutter. 😸

Conclusion

Here, I have shown how you can build a simple memo-taking app using Flutter. I hope you learned something from this as I had fun creating it, as always you can find the source code for the above via my Github:

https://github.com/ethand91/simple-flutter-memo

Maybe you can find a way so that the data persists every reload. 😉

Any questions or comments, please let me know.

As always Happy Coding! 😎

Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.