Making the First Small Change in main.dart
After running the starter Flutter app, I make one small edit and see the screen begin to look like my Offline Product Catalog.
The starter Flutter app is running, Chrome is open, and the counter button is doing its tiny little job.
That is good news.
It means the project is alive, Flutter understands it, and my second-hand ThinkPad T580 has not burst into dramatic smoke.
But this is still the default Flutter app. It does not look like an Offline Product Catalog yet, and it certainly does not know anything about products.
So before changing the layout, adding product cards, or building anything fancy, I want to make one very small change first.
I will change the text inside main.dart, run the project again, and watch the screen respond.
Small change. Clear result. No coding tornado.
Checking the Project Before Editing
Before touching main.dart, I return to the terminal and confirm that I am standing inside the correct Flutter project.
This small check matters because I previously had a duplicated project folder. One wrong cd command could send me back into the folder maze, and today is not a good day to become a filesystem archaeologist.
Now that I know I am inside the correct project, I check the lib folder before opening anything in Visual Studio Code.
In a Flutter project, this is where the main Dart code usually lives. I am not editing yet. I am only checking the door before walking through it.
Opening main.dart From the Terminal
The lib folder contains the file I am looking for:
ls libThe terminal shows:
main.dart is inside the lib folder.main.dartNow I know exactly where the main Flutter file is. There is no need to wander through Visual Studio Code clicking folders like I have misplaced my keys.
From the same terminal, I open the file directly:
code lib/main.dart
main.dart directly in Visual Studio Code.Visual Studio Code opens with main.dart ready in the editor.
I still have not changed anything. First, I want to look at the current code and find the small piece of text that controls what appears on the screen.
Finding the Text I Want to Change
With main.dart open in Visual Studio Code, I look for the default title used by the starter Flutter app.
Instead of scrolling through the file and hoping my eyes behave, I use the search tool inside the editor.
I press:
Ctrl + FThen I search for:
Flutter DemoVisual Studio Code highlights the matching text inside main.dart.
There it is. The starter app is still wearing its factory name tag, and I am about to replace it with something that belongs to this project.
Flutter Demo title inside main.dart.Changing the App Title From the Terminal
I could edit the text directly in Visual Studio Code, but I want to keep the terminal at the center of this workflow.
First, I check that the old title still exists inside main.dart:
grep -n "title: 'Flutter Demo'," lib/main.dart
main.dart.The terminal shows the matching line and its line number.
Now I replace only that exact title with the real name of the project:
python3 - <<'PY'
from pathlib import Pathfile_path = Path("lib/main.dart")
text = file_path.read_text()old_text = "title: 'Flutter Demo',"
new_text = "title: 'Offline Product Catalog',"if old_text not in text:
raise SystemExit("The original title was not found.")file_path.write_text(text.replace(old_text, new_text, 1))
print("App title updated successfully.")
PY
The terminal handles the edit, while Visual Studio Code quietly notices that the file has changed.
No clicking through the code. No accidental deletion of a bracket. The terminal performs one small, precise operation and leaves the rest of the file alone.
MaterialApp has now become Offline Product Catalog.Changing the Home Page Title From the Terminal
The first title is now updated inside MaterialApp, but the text shown in the app bar still uses the old starter name.
Before changing it, I confirm that the old home page title is still inside main.dart:
grep -n "Flutter Demo Home Page" lib/main.dart
main.dart.The terminal finds this line:
home: const MyHomePage(title: 'Flutter Demo Home Page'),Now I replace only that exact text:
python3 - <<'PY'
from pathlib import Pathfile_path = Path("lib/main.dart")
text = file_path.read_text()old_text = "Flutter Demo Home Page"
new_text = "Offline Product Catalog"if old_text not in text:
raise SystemExit("The old home page title was not found.")file_path.write_text(text.replace(old_text, new_text, 1))
print("Home page title updated successfully.")
PY
This change is small, but it matters more visually. The next time the app runs, the top bar should finally stop introducing itself as a Flutter demo.
MyHomePage now matches the real name of the app.Checking the Project After the Edit
The two titles are now changed, but I do not run the app immediately.
Get Atelier Flutter’s stories in your inbox
Join Medium for free to get updates from this writer.
First, I return to the terminal and ask Flutter to inspect the project:
flutter analyzeThis check looks for problems in the Dart code before I open the browser again.
A tiny text edit should not cause trouble, but code has a strange talent for hiding a banana peel exactly where nobody expects one.
The result is:
No issues found!That means the project is still clean, the edit is valid, and Flutter has no complaints.
flutter analyze to make sure the project is still clean before launching it again.Checking the Available Devices Again
The code passes flutter analyze, so the next step is to confirm that Chrome is still available as a target device.
I check the connected devices from the terminal:
flutter devices
Flutter lists the devices it can use, including Chrome.
This may feel like checking whether the chair is still behind me before sitting down, but it keeps the workflow clear. I know which device I am about to use before I run anything.
Running the App Again in Chrome
The project is clean, Chrome is available, and the small edit is ready to face the screen.
From the terminal, I run:
flutter run -d chromeFlutter builds the project and opens the app in Chrome.
This time, the app bar no longer says Flutter Demo Home Page.
It now says:
Offline Product Catalog
The counter app is still there, quietly counting button presses like nothing happened. But the name at the top has changed, and that is enough to prove something important.
A small change inside main.dart can travel all the way to the screen.
The app is still wearing most of its starter clothes, but at least the name tag finally belongs to us.
Seeing the Connection Between Code and Screen
The change is small, but the result is easy to see.
Inside main.dart, I changed the title passed to MyHomePage:
home: const MyHomePage(title: 'Offline Product Catalog'),Later in the same file, the app bar reads that value here:
title: Text(widget.title),That means the text I changed near the top of the file travels into MyHomePage, then appears inside the app bar.
It is a simple path:
main.dart
→ MyHomePage
→ widget.title
→ AppBar
→ Offline Product CatalogNothing dramatic happened. No new layout, no product cards, and no database wearing a tiny hard hat.
But now I can see how one value moves through the code and reaches the screen. That is the first real step away from the default Flutter demo.
What Changed, and What Did Not
The app now has the correct name at the top of the screen.
What changed:
Flutter Demo Home Page
→ Offline Product CatalogWhat did not change:
The counter
The button
The layout
The starter Flutter structureThat is exactly what I wanted.
This first edit was not supposed to transform the app into a polished product catalog. It was only meant to prove that I can change one value inside main.dart, check the project, run it safely, and see the result in Chrome.
One small edit, one visible result, and no mysterious wreckage hiding behind the curtain.
A Small Change, but a Real One
The app still looks like the Flutter starter project, and the counter is still sitting in the middle of the screen doing important counter business.
But something has changed.
The project now carries its real name, and I made that change through a complete workflow:
check the project
→ find the code
→ edit from the terminal
→ inspect the result in Visual Studio Code
→ run flutter analyze
→ check the device
→ run the app in ChromeThat workflow matters more than the size of the edit.
I am not trying to build the entire catalog in one heroic afternoon. That is usually how a calm project turns into twelve open tabs, three missing brackets, and a terminal that suddenly feels judgmental.
For now, the first change is done.
The next step is to remove more of the starter Flutter identity and begin shaping the screen into something that actually looks like an Offline Product Catalog.
