Tutorial: Building a Simple App from Scratch

Tutorial: Building a Simple App from Scratch

Creating an app from scratch can seem like a daunting task, but with the right approach and tools, even beginners can build their own functional apps. This tutorial will walk you through how to build a simple app from scratch, step by step. We’ll use Flutter, a popular cross-platform development framework that allows you to create apps for both Android and iOS with a single codebase.

What You’ll Need:

• Flutter SDK: Download it from Flutter’s official website.
• Visual Studio Code or Android Studio: Your choice of code editor.
• Dart language knowledge (if you’re new, don’t worry, we’ll cover the basics).
• Basic knowledge of widgets in Flutter.

By the end of this tutorial, you’ll have a simple “To-Do List” app that allows users to add, delete, and display tasks. Let’s get started!

Step 1: Setting Up Your Development Environment

Before we dive into the code, we need to set up the environment.

1. Install Flutter: Download the Flutter SDK from the official site, then follow the instructions for your operating system (Windows, macOS, or Linux) to install it.
2. Install a Code Editor: You can use either Visual Studio Code or Android Studio. Flutter works great with both. If you go with VS Code, be sure to install the Flutter and Dart extensions.
3. Set Up an Emulator: You’ll need an emulator to test your app. In Android Studio, you can create an Android virtual device. Alternatively, you can run your app directly on a physical device by enabling developer mode and USB debugging on your phone.
4. Create a New Flutter Project: Open a terminal in your project folder and type the following command:
   bash

   Copy code

   flutter create todo_app


   Navigate to the project folder:

   bash

   Copy code

   cd todo_app


Step 2: Building the App’s Basic UI

Now that your environment is set up, let’s start coding. Open the project in your preferred code editor.

1. Open main.dart: In Flutter, everything starts from main.dart. In this file, we’ll define the app structure.
2. Create the Main App Widget: In main.dart, replace the default code with the following:
   dart

   Copy code

   import 'package:flutter/material.dart';

   void main() {
   runApp(ToDoApp());
   }

   class ToDoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple To-Do List',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ToDoListScreen(),
);
}
}


This is the main entry point of the app. The ToDoApp class defines the structure and theme, and it renders the ToDoListScreen as the home screen.

Step 3: Designing the To-Do List Screen

Now, let’s create the screen where users will interact with the to-do list.

1. Create the To-Do List UI: Add the following code inside main.dart:
   dart

   Copy code

   class ToDoListScreen extends StatefulWidget {
   @override
   _ToDoListScreenState createState() => _ToDoListScreenState();
   }

   class _ToDoListScreenState extends State<ToDoListScreen> {
   final List<String> _todoItems = []; // List to hold the tasks

   void _addTodoItem(String task) {
   if (task.isNotEmpty) {
   setState(() {
   _todoItems.add(task);
   });
   }
   }

   void _removeTodoItem(int index) {
   setState(() {
   _todoItems.removeAt(index);
   });
   }

   @override
   Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
   title: Text('To-Do List'),
   ),
   body: _buildTodoList(),
   floatingActionButton: FloatingActionButton(
   onPressed: _pushAddTodoScreen,
   tooltip: 'Add task',
   child: Icon(Icons.add),
   ),
   );
   }

   Widget _buildTodoList() {
   return ListView.builder(
   itemCount: _todoItems.length,
   itemBuilder: (context, index) {
   return _buildTodoItem(_todoItems[index], index);
   },
   );
   }

   Widget _buildTodoItem(String todoText, int index) {
   return ListTile(
   title: Text(todoText),
   trailing: IconButton(
   icon: Icon(Icons.delete),
   onPressed: () => _removeTodoItem(index),
   ),
   );
   }

   void _pushAddTodoScreen() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return Scaffold(
appBar: AppBar(title: Text('Add a new task')),
body: TextField(
autofocus: true,
onSubmitted: (val) {
_addTodoItem(val);
Navigator.pop(context);
},
decoration: InputDecoration(
hintText: 'Enter something to do...',
contentPadding: EdgeInsets.all(16.0),
),
),
);
},
),
);
}
}


This code adds the ability to create and delete tasks in a to-do list. The _todoItems list holds the tasks, and the _addTodoItem and _removeTodoItem functions handle adding and deleting tasks.

Here’s a breakdown of what we’re doing:

• The ListView.builder dynamically builds a list of tasks.
• FloatingActionButton triggers a new screen where users can add tasks.
• Each ListTile in the list has a task name and a delete button to remove tasks.

Step 4: Testing the App

Once you’ve written the code, it’s time to test the app.

1. Run the App: In the terminal, run the following command to start the app:
   bash

   Copy code

   flutter run


   This will compile your Flutter app and launch it in the emulator or on your device.

2. Test Features:
   • Add tasks by clicking the + button and entering a task in the text field.
   • See your tasks appear in the list.
   • Delete tasks by clicking the trash icon next to them.

Step 5: Polishing the App

Your app is now functional, but let’s improve the design and functionality.

1. Add Input Validation: Modify the _addTodoItem function to ignore empty input:
   dart

   Copy code

   void _addTodoItem(String task) {
if (task.trim().isNotEmpty) {
setState(() {
_todoItems.add(task.trim());
});
}
}

2. Add Styling: You can change the app’s theme or customize individual widgets. For example, change the primary color in MaterialApp to give the app a fresh look:
   dart

   Copy code

   theme: ThemeData(
primarySwatch: Colors.green,
),

3. Add Snackbar for Deleting Tasks: To improve user experience, show a confirmation when a task is deleted:
   dart

   Copy code

   void _removeTodoItem(int index) {
   String removedTask = _todoItems[index];
   setState(() {
   _todoItems.removeAt(index);
   });

   ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Task "$removedTask" deleted'),
),
);
}


Step 6: Deploying the App

Now that your app is ready, you can deploy it to the Google Play Store or Apple App Store. Here’s a quick overview of what’s involved:

1. Build APK for Android: Run the following command to generate an APK:
   bash

   Copy code

   flutter build apk --release

2. Test on iOS (Mac required): If you’re developing for iOS, you’ll need to build the app for release in Xcode:
   bash

   Copy code

   flutter build ios --release


Conclusion

Building an app from scratch may seem complex at first, but by following a structured process, you can quickly bring your ideas to life. In this tutorial, we used Flutter to create a simple to-do list app, demonstrating the essential steps in app development. From setting up the development environment to creating a functional user interface, you now have the foundation to build more complex apps. Keep experimenting with new features, and soon you’ll be creating fully-fledged apps that can be published on app stores!