The Wake-Up Call: How Social Media Algorithms Hijacked My Progress

A few weeks ago, I realized something terrifying: I hadn’t written a single line of meaningful code in 14 days. My plan to “stay updated” by watching tech videos, reading trend reports, and doom-scrolling through programming debates backfired spectacularly. Here’s why:

1. The Illusion of “Learning” vs. Actual Learning
   I convinced myself that watching videos about Flutter updates, React Native vs. Flutter debates, or AI replacing developers counted as “productive” time. Sure, I learned things like:

   • Flutter’s latest features (while also seeing clickbait like “Is Flutter Dead?”),

   • Tools other developers use,

   • Why React Native might be better (until the next video argued the opposite).

But this passive consumption left me overwhelmed, confused, and paralyzed. Every conflicting opinion made me question my choices (“Should I switch to React Native?”), and I wasted days hopping between tutorials without building anything.

2. Life Happens (And Lazy Me Took Over)
   Work routine changes, personal commitments, and unexpected tasks became excuses to procrastinate. The less I coded, the harder it felt to start again. The cycle of guilt and avoidance grew louder: “I’ll do it tomorrow.”

3. Time Management? What’s That?
   Let’s be real—I’m terrible at managing time. I’d schedule “learning hours” but end up scrolling, telling myself, “I’ll just finish this video.” Spoiler: I never did.

The Realization: Tutorial Hell Isn’t Just for Beginners

I’ve been coding for years, yet I fell into the same trap I warn beginners about: tutorial hell. Watching endless videos without applying the knowledge? Check. Jumping between technologies based on trends? Check. Feeling like a fraud despite “knowing” concepts? Double-check.

But here’s the kicker: You don’t learn to swim by watching swimming tutorials.

The Fix: Building My Way Out of the Rut

Enough is enough. I’m done letting algorithms and procrastination dictate my progress. Here’s my plan:

1. The “No More Tutorials” Challenge

• Project First, Tutorials Second: Instead of starting with tutorials, I’m building a basic news app in Flutter. When I hit a roadblock, I’ll look up specific solutions. No more passive watching!

• Focus on Fundamentals: State management, API integration, clean architecture—things I’ve “learned” a dozen times but rarely implemented fully.

2. Public Accountability

Writing this post is my way of saying: “Call me out if I don’t follow through.” I’ll share weekly updates on:

• Progress (or lack thereof),

• Code snippets,

• Lessons learned (and epic fails).

Why a News App?

It’s simple, scalable, and covers critical concepts:

• Fetching data from APIs,

• State management (Provider/Riverpod),

• Caching, error handling, and UI design.
  Plus, I can expand it later with features like user authentication or notifications.

A Message to My Future Self (And You)

If you’re reading this and thinking, “I’ve been there too,” here’s my advice:

• Stop consuming; start building.

• Trends come and go—skills stay.

• Progress > Perfection.

What’s Next?
By next week, I’ll have the app’s skeleton ready. Follow along on my blog for updates, and feel free to roast me if I slack off.

Let’s code.

P.S. If you’ve ever fallen into the “endless scrolling” trap, reply with your story. Misery loves company—and accountability! 😅

Custom widgets are like making your own momo wrapper—just the way you like it. Let me explain how I learned to make my own widgets in Flutter, step by step.

Benefits of Custom Widgets in Flutter

When I started using Flutter, my code often repeated. For example, if every screen needed a colorful box with text and an icon, I had to write the same code again and again. This made my app messy and hard to update.

Then I learned about custom widgets. It felt like a solution to everything! With custom widgets, I could:

• Stop repeating code.

• Keep my app neat and easy to update.

• Make changes in one place instead of everywhere.

How I Learned to Create a Custom Widget

Let me show you how I made a custom widget step by step. I created something called NepaliCard to display a food name and description. This example helped me understand Flutter widget creation step-by-step.

1. Start with the Basics

First, I created a new file called nepali_card.dart. Keeping widgets in separate files makes them easy to find.

import 'package:flutter/material.dart';

class NepaliCard extends StatelessWidget {
  final String title;
  final String description;

  // Constructor to get inputs
  const NepaliCard({
    required this.title,
    required this.description,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text(
              description,
              style: TextStyle(fontSize: 16, color: Colors.grey[700]),
            ),
          ],
        ),
      ),
    );
  }
}

Here’s what’s happening:

• title and description are inputs for the widget.

• The build method defines how the widget will look.

2. Use the Widget

Once my widget was ready, I used it in my main app. Here’s what I added to main.dart:

import 'package:flutter/material.dart';
import 'nepali_card.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Nepali Foods')),
        body: ListView(
          children: [
            NepaliCard(
              title: 'Momo',
              description: 'Delicious steamed dumplings with meat or veggies.',
            ),
            NepaliCard(
              title: 'Sel Roti',
              description: 'A crispy, sweet rice-based ring-shaped bread.',
            ),
            NepaliCard(
              title: 'Dal Bhat',
              description: 'A classic Nepali meal with rice, lentils, and veggies.',
            ),
          ],
        ),
      ),
    );
  }
}

3. Experiment and Change

When I saw this working, I was so happy! Then I thought, "What if I add images?" So, I updated the NepaliCard widget to include an image parameter. It was fun to try different things and see how they worked.

What Helped Me While Learning

Here are some things that made learning easier:

1. Start Small: I didn’t try to make a big, complex widget. I started with simple cards.

2. Reuse Widgets: After I made my first widget, I used it in different places. This helped me understand how flexible custom widgets are.

3. Ask for Help: Whenever I got stuck, I searched online or asked Flutter communities. People were very helpful!

Flutter Custom Widgets Made Easy

For me, learning custom widgets was like learning to cook. At first, it felt hard, but step by step, I got better. And just like cooking, you can always try new things to make your widgets unique.

If you’re learning Flutter, try creating a custom widget. Start with something simple, keep practicing, and have fun. Happy Fluttering!

An API (Application Programming Interface) is like a bridge that lets two software programs talk to each other. It defines how one program can request information or services from another. For example, when you use a weather app, the app asks a weather service API for the current temperature, and the API sends back the data, like "15°C and sunny."

APIs make it easy for systems to work together. For instance, an online store might use a payment gateway API to process payments. When you enter your card details, the API sends the information securely to the bank, processes the payment, and returns a response like "Payment successful." APIs are everywhere, simplifying how apps and services communicate behind the scenes.

"An API is like a waiter at a restaurant—it takes your request to the kitchen (server) and brings back exactly what you ordered, without you needing to know how it was prepared."

Store Analogy for API Requests

1. You (Your App): Want to buy something (like a new product, which in our case is news).

2. The Store (The API): Sells the product you need (the news articles).

3. Your Request (HTTP Request): You go to the store and ask, "Do you have any new products?" (You’re asking for the latest news).

4. Store's Response (HTTP Response): The store gives you the latest products (news articles) if they have them, or they say "Sorry, we don’t have it right now."

To use the http package in your Flutter project, you can simply run the command flutter pub add http in your terminal. This automatically adds the package to your project and installs it. Once the installation is complete, you can import the package into your Dart files using import 'package:http/http.dart' as http;. This allows you to easily make HTTP requests in your app.

Step 1: API Integration (Backend Logic)

This file is responsible for making the API request to the "store" (NewsAPI) and retrieving the products (news).

// File: store_service.dart
import 'package:http/http.dart' as http; // To communicate with the store (HTTP client)
import 'dart:convert'; // To decode the JSON response from the store (unwrap the box)

class StoreService {
  // Function to fetch products (news) from the store (API)
  Future<List<dynamic>> fetchProducts() async {
    final url = Uri.parse(
        'https://jsonplaceholder.typicode.com/posts'); // Store's address (API URL)

    final response = await http.get(url); // Asking the store for the latest products (request)

    if (response.statusCode == 200) {
      // If the store says, "Yes, we have the products!"
      return json.decode(response.body); // Unwrap the box (JSON) and extract the products (news articles)
    } else {
      // If the store replies with an error (no products)
      throw Exception('Failed to load products'); // Show error if the store has no products
    }
  }
}

Explanation of the Code

store_service.dart (Backend Logic)

1. Imports:

   • We import http to make HTTP requests (ask the store for products) and dart:convert to decode the JSON data (unwrap the box containing news articles).

2. StoreService Class:

   • This is where we define the logic for asking the store for products. The fetchProducts function sends an HTTP request to the API URL, waits for a response, and if successful, decodes the response (JSON) to extract the product data.

3. Error Handling:

   • If the store has no products, we handle it with an exception (throw Exception('Failed to load products');).

Step 2: UI Page (Store Display)

// File: store_page.dart
import 'package:flutter/material.dart'; // For UI components (store shelves)
import 'store_service.dart'; // Asking the store for products (news)

class StorePage extends StatefulWidget {
  @override
  _StorePageState createState() => _StorePageState();
}

class _StorePageState extends State<StorePage> {
  late Future<List<dynamic>> products; // Where we keep the products (news) from the store

  @override
  void initState() {
    super.initState();
    products = StoreService().fetchProducts(); // Asking the store for the latest products (news)
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Store App'), // Store's name (your app title)
      ),
      body: FutureBuilder<List<dynamic>>(
        future: products, // Waiting for the store to give us the products (news)
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator()); // While waiting, show a loading symbol
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}')); // If the store has an issue (error response)
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No products available')); // If the store has no products (empty result)
          }

          final items = snapshot.data!; // The products (items) from the store
          return ListView.builder(
            itemCount: items.length, // How many products (news items) to display
            itemBuilder: (context, index) {
              final item = items[index]; // Each individual product (news article)
              return ListTile(
                title: Text(item['title']), // Product name (news title)
                subtitle: Text(item['body']), // Product description (news body)
              );
            },
          );
        },
      ),
    );
  }
}

store_page.dart (UI Logic)

1. FutureBuilder:

   • We use a FutureBuilder to handle the asynchronous nature of the API request. The app will show a loading indicator while waiting for the store to respond and will display the news when available.

2. Displaying Data/News:

   • Once the data is received, the ListView.builder dynamically creates a list of products (articles) to display, each with a title and description.

3. Error Handling:

   • If there’s an error or no data, appropriate error messages are displayed on the UI.

3. Main File: main.dart

This file initializes the app and opens the "store" to show the products (news).

// File: main.dart
import 'package:flutter/material.dart';
import 'store_page.dart'; // The page where we see the store products (news)

void main() => runApp(StoreApp());

class StoreApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StorePage(), // Going to the store to see the products (news)
    );
  }
}

Conclusion

This article demonstrates how to fetch and display data in Flutter using the http package. By breaking the process into simple steps, we learned how to send API requests, decode JSON responses, handle errors, and display data dynamically using widgets like FutureBuilder and ListView. This example serves as a foundational guide for building apps that connect to APIs, enabling you to create dynamic, data-driven Flutter applications with real-time internet data integration.

What is a Widget?

A widget is like a building block in Flutter. Imagine you’re creating a LEGO model — each piece is like a widget. Widgets are the basic units that make up your app’s user interface (UI). Everything you see on the screen in a Flutter app is a widget: buttons, text, images, and even the spaces between them.

Widgets are:

• Reusable: You can use the same widget in multiple places.

• Customizable: You can change how they look or behave.

• Hierarchical: Widgets live inside other widgets, forming a tree-like structure.

Why Are Widgets Key to Flutter?

Flutter is all about widgets! They:

• Make building UIs easy.

• Let you focus on what you want rather than how to do it.

• Are part of a system where everything is a widget, even things like padding and layout.

Widgets can be stateless (don’t change) or stateful (can change when you interact with them).

Starting with Core Widgets

Let’s talk about some essential widgets that you’ll use all the time in Flutter. We’ll start with the most basic ones and move to more advanced ones.

1. MaterialApp

The MaterialApp widget is like the foundation of your app. It wraps your whole app and gives it a Material Design look (Google’s design system).

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Hello Flutter')),
      body: Center(child: Text('Welcome to Flutter!')),
    ),
  ));
}

• Why use it? It helps manage navigation (moving between screens) and themes (colors and fonts).

• What if we don’t use it? Without it, your app won’t have basic features like a default design, themes, or navigation.

2. Scaffold

The Scaffold widget provides a basic structure for your app screen. It includes common UI elements like an app bar, floating action button, and a drawer.

Scaffold(
  appBar: AppBar(
    title: Text('Scaffold Example'),
  ),
  body: Center(
    child: Text('This is a Scaffold!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

• Why use it? It saves time by giving you prebuilt components.

• What if we don’t use it? You’d have to create these features manually, which can be tedious.

Now that we have the basics down, let’s look at some other widgets you’ll use frequently.

3. Container

The Container widget is like a box. You can:

• Change its size.

• Add color or decorations.

• Use it to hold other widgets.

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Container',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

The Container widget is like a box. You can:

• Change its size.

• Add color or decorations.

• Use it to hold other widgets.

4. Center

The Center widget is used to center its child widget in the middle of the screen.

Center(
  child: Text(
    'I am centered!',
    style: TextStyle(fontSize: 20),
  ),
);

The Center widget is used to center its child widget in the middle of the screen.

5. Text

The Text widget displays text on the screen. You can customize the font, size, color, and more.

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    color: Colors.black,
    fontWeight: FontWeight.bold,
  ),
);

The Text widget displays text on the screen. You can customize the font, size, color, and more.

6. Image

The Image widget is for showing pictures. You can load images from the internet or your app’s assets.

Image.network(
  'https://flutter.dev/images/flutter-logo-sharing.png',
  width: 100,
  height: 100,
);

The Image widget is for showing pictures. You can load images from the internet, your phone, or your app’s assets.

7. Stack

The Stack widget lets you place widgets on top of each other, like layers.

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.red),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ],
);

The Stack widget lets you place widgets on top of each other, like layers.

8. Row and Column

These widgets arrange children in a horizontal (Row) or vertical (Column) direction.

Row Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.star, size: 50, color: Colors.red),
    Icon(Icons.star, size: 50, color: Colors.green),
    Icon(Icons.star, size: 50, color: Colors.blue),
  ],
);

Column Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('First Item'),
    Text('Second Item'),
    Text('Third Item'),
  ],
);

These widgets arrange children in a horizontal (Row) or vertical (Column) direction.

9. ListView

Use the ListView widget to create scrollable lists of widgets.

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
);

Use the ListView widget to create scrollable lists of widgets.

10. Padding

The Padding widget adds space around a widget.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
);

The Padding widget adds space around a widget.

11. ElevatedButton

This widget creates a button with some elevation, making it look raised.

ElevatedButton(
  onPressed: () {
    print('Button Pressed!');
  },
  child: Text('Click Me'),
);

This widget creates a button with some elevation, making it look raised.

12. Icon

The Icon widget displays icons, like those used for navigation or actions.

Icon(
  Icons.thumb_up,
  size: 50,
  color: Colors.blue,
);

The Icon widget displays icons, like those used for navigation or actions.

13. Card

The Card widget gives a material design card look to your content.

Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('This is a Card!'),
  ),
  elevation: 4,
);

The Card widget gives a material design card look to your content.

14. Expanded

The Expanded widget lets a child widget take up available space within a Row or Column.

Row(
  children: [
    Expanded(
      child: Container(color: Colors.red, height: 100),
    ),
    Expanded(
      child: Container(color: Colors.green, height: 100),
    ),
  ],
);

The Expanded widget lets a child widget take up available space within a Row or Column.

15. TextField

The TextField widget lets users input text.

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
);

The TextField widget lets users input text.

16. AppBar

The AppBar widget provides a title bar at the top of the screen.

AppBar(
  title: Text('AppBar Example'),
  backgroundColor: Colors.blue,
);

The AppBar widget provides a title bar at the top of the screen.

17. AlertDialog

The AlertDialog widget shows a pop-up dialog box.

AlertDialog(
  title: Text('Alert'),
  content: Text('This is an alert dialog.'),
  actions: [
    TextButton(
      onPressed: () {},
      child: Text('OK'),
    ),
  ],
);

The AlertDialog widget shows a pop-up dialog box.

18. Checkbox

The Checkbox widget is for toggling options on or off.

Checkbox(
  value: true,
  onChanged: (bool? newValue) {
    print('Checkbox toggled!');
  },
);

The Checkbox widget is for toggling options on or off.

19. Slider

The Slider widget lets users select a value by sliding a thumb along a track.

20. GestureDetector

The GestureDetector widget allows you to detect gestures like taps, swipes, and pinches.

Conclusion

Widgets are the heart of Flutter. They make creating beautiful and functional apps straightforward and fun. By mastering the most commonly used widgets, you’ll be well on your way to building amazing apps. Remember, every great app starts with small blocks — just like LEGO!

Creating a Flutter app is just like running a successful MOMO business. In both, you need the right tools, well-organized processes, and the ability to deliver exactly what your customers (or users) want. Just as you need a perfect recipe, skilled cooks, and a reliable stove for your stall, you need Dart, widgets, and a rendering engine to create your app.

Let’s explore the basics of Flutter through the lens of MOMOs.

What is Flutter?

Flutter is like the manager of your MOMO stall. It ensures everything runs smoothly, from preparing MOMOs to serving customers.

It’s an open-source UI toolkit created by Google that helps you build apps for multiple platforms—iOS, Android, web, and desktop—using a single codebase.

Flutter allows you to:

• Design beautiful user interfaces (just like serving perfectly folded MOMO).

• Handle animations, gestures, and interactions seamlessly.

• Deliver consistent experiences across platforms, no matter where your “MOMO stall” is set up.

What is Dart?

Dart, the programming language behind Flutter, is like the recipe for your MOMO. It gives you clear instructions for preparing the dish—how much flour, meat, and spices to use. Dart is:

• Simple: Easy to learn, just like a basic MOMO recipe.

• Flexible: Allows you to create complex apps, much like how you can make jhol MOMO, kothey MOMO, or even chocolate MOMO with the same ingredients.

• Efficient: With features like hot reload, you can adjust your code (or recipe) and see changes instantly, without restarting your app.

Widgets: The Ingredients

Widgets are the individual ingredients that come together to make a MOMO.

In Flutter, everything is a widget—text, buttons, images, layouts, and even animations.

Types of Widgets:

• Stateless Widgets:

  • These are like the flour in MOMO—they stay the same and don’t change.

• Stateful Widgets:

  • These are like the chili level in jhol—they can be adjusted based on customer (user) preferences.

Widgets work together to create the app’s user interface, just like ingredients come together to make the perfect MOMO.

The Build Method: The Cooking Process

The build() method in Flutter is like the MOMO cooking process. It:

• Assembles all the ingredients (widgets) together to prepare the final dish (your app screen).

• Ensures the MOMOs (UI elements) are arranged properly on the plate (screen layout).

Every time you make a change to the ingredients or presentation, the build method ensures the final dish is updated accordingly.

Rendering Engine: The Cooking Stove

Flutter uses its own rendering engine called Skia. This is like the stove you use to cook MOMOs. It:

• Ensures consistent cooking, whether you’re serving MOMO in Pokhara, Kathmandu, or Berlin (iOS, Android, or web).

• Lets you create visually stunning designs (perfectly cooked and presented MOMOs).

Hot Reload: Adding Extra Jhol Instantly

Flutter’s hot reload is like quickly adding more jhol MOMO to a customer’s plate without making them wait. It allows you to:

• Make changes to your code instantly.

• See updates in real-time without restarting the app.

This feature saves time and makes development super efficient, just like quickly responding to customer requests at your stall.

Putting It All Together

When Flutter (the manager), Dart (the recipe), and widgets (the ingredients) come together, you get an app that runs as efficiently as a busy MOMO stall. Whether you’re building a simple app or a complex one, the process remains smooth, scalable, and enjoyable.

Just as every MOMO has its unique taste, every app you build with Flutter will have its unique flair. So, roll up your sleeves, grab your ingredients (code), and start creating your masterpiece!

While I don’t know how many people will stumble upon this, this blog is personal to me—a way to document my progress, hold myself accountable, and look back to see how far I’ve come. It’s my little corner of the internet where I can learn, share my thoughts, and maybe even vent about the challenges of learning something completely new. But if you’re here reading this, I hope you find something valuable, relatable, or even inspiring in my journey.

Why Flutter and Why Now?

Flutter is an open-source UI software development kit created by Google that enables developers to build beautiful, natively compiled applications for mobile, web, and desktop—all from a single codebase.

But there’s another reason why I’m starting this now. I’m in my mid-20s, and the world feels both full of opportunities and deeply uncertain. Every day, I hear discussions about how AI is replacing jobs. The job market feels like it’s changing faster than we can keep up. As a university teacher, I stand in front of students talking about technology—but deep down, I know I need to adapt, learn, and grow to stay relevant. I want to walk the talk.

I’ve chosen Flutter because it feels like a practical, future-proof skill. It allows me to build apps and bring ideas to life while learning something completely new. My goal is to upskill, enjoy the process of learning, and eventually land a job in this evolving industry.

My Learning Goals

I know this won’t be easy. Learning something new rarely is. But I’m ready for the challenge. My goals are:

• Understand the Basics: Start with Flutter’s core concepts like widgets, layouts, and state management.

• Learn Dart: Since Dart is new to me, I’ll focus on mastering its syntax and unique features.

• Build Things: The only way to learn is to build. Even if it’s a tiny project that no one will see, it counts.

• Reflect Weekly: I won’t post daily—I want to focus on learning. Instead, I’ll share my progress once a week. This will include my struggles, what I’ve built, and what I’ve learned.

A Personal Challenge

This is more than just learning Flutter. It’s a challenge to myself. To learn something new, to step outside of my comfort zone, and to make the most of this uncertain time. I want to prove to myself that I can adapt, grow, and enjoy the process without worrying too much about where I’ll end up.

Final Thought

If you’ve stumbled upon this post somehow, thank you for being here. I hope this blog will grow into a story of persistence, learning, and small victories. Today, on my 25th birthday, I’m taking the first step toward something new.

Here’s to learning, growing, and building—one week at a time. 🚀