DEV Community: Thinnakrit

🧩 Ditch the .arb: Using SQLite for Flutter Translations Like a Pro

Thinnakrit — Wed, 14 May 2025 03:42:12 +0000

When building multilingual Flutter apps, the usual go-to for localization is .arb or .json files. But what if your app needs something more dynamic? What if translations can be edited by an admin? Or fetched from your backend? That’s where SQLite shines. 💡

In this article, we’ll walk through setting up a SQLite-powered translation system in Flutter that’s flexible, updatable at runtime, and great for user- or admin-generated content. Ready? Let’s go!

🛠️ Step 1: Add Dependencies
First, pull in the packages you’ll need:

dependencies:
  sqflite: ^2.4.2
  path_provider: ^2.1.5
  flutter_localizations:
    sdk: flutter

sqflite helps us talk to the local database, and path_provider gives us the app’s file path to store it.

flutter_localizations: https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization , https://pub.dev/packages/flutter_localization
sqflite: https://pub.dev/packages/sqflite
path_provider: https://pub.dev/packages/path_provider

🧱 Step 2: Create a Translations Table
Define your schema like this:

CREATE TABLE translations (
  id INTEGER PRIMARY KEY,
  locale TEXT,
  key TEXT,
  value TEXT
);

This simple table holds everything you need: the language (locale), the key (key), and its translation (value).

📦 Step 3: Translation Service
Let’s load the translations into memory so we can use them in the app:

class TranslationService {
  final Database db;

  TranslationService(this.db);

  Future<Map<String, String>> loadTranslations(String locale) async {
    final List<Map<String, dynamic>> result = await db.query(
      'translations',
      where: 'locale = ?',
      whereArgs: [locale],
    );

    return {
      for (var row in result) row['key'] as String: row['value'] as String,
    };
  }
}

This service pulls all translation entries for a given locale and returns them as a Map.

🔌 Step 4: Custom Localization Delegate
Instead of using .arb files, we’ll build a LocalizationsDelegate that loads from SQLite.

class SQLiteLocalizationDelegate extends LocalizationsDelegate<SQLiteLocalizations> {
  final TranslationService service;

  SQLiteLocalizationDelegate(this.service);

  @override
  bool isSupported(Locale locale) => true;

  @override
  Future<SQLiteLocalizations> load(Locale locale) async {
    final translations = await service.loadTranslations(locale.languageCode);
    return SQLiteLocalizations(translations);
  }

  @override
  bool shouldReload(covariant LocalizationsDelegate old) => false;
}

class SQLiteLocalizations {
  final Map<String, String> _localizedStrings;

  SQLiteLocalizations(this._localizedStrings);

  String translate(String key) => _localizedStrings[key] ?? key;

  static SQLiteLocalizations of(BuildContext context) =>
      Localizations.of<SQLiteLocalizations>(context, SQLiteLocalizations)!;
}

With this setup, your app knows how to fetch translations from the database based on the current locale.

🏁 Step 5: Plug It Into Your App
Now wire everything up in your MaterialApp:

MaterialApp(
  localizationsDelegates: [
    SQLiteLocalizationDelegate(translationService),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [Locale('en'), Locale('es')],
  home: MyHomePage(),
);

And wherever you need a translation:

Text(SQLiteLocalizations.of(context).translate('hello'));

Boom 💥 — your app is now powered by dynamic, database-driven translations!

✨ Why Go with SQLite?
Using SQLite gives you:

✅ Runtime translation updates
✅ Easy syncing with backend-localized data
✅ A clean, scalable structure for multi-language apps

This is especially useful for apps with content that evolves over time or needs customization per user.

Let's Connect! 🎉
If you found this helpful and want to stay updated with more Flutter tips, feel free to follow me:

📘 Dev.to: https://dev.to/thinnakrit
💼 LinkedIn: https://www.linkedin.com/in/thinnakrit
💻 GitHub: https://github.com/thinnakrit

Happy coding! 😊

From if-else Chaos to Clean Code: My Developer Journey

Thinnakrit — Sat, 22 Feb 2025 06:41:19 +0000

I used to think if-else was my best friend…
until it backstabbed me with a giant, unreadable mess. 😵‍💫

One moment, it’s just a couple of conditions.
The next? Boom! A deep, never-ending rabbit hole of logic that even past me can’t understand. 😂

Through trial (and lots of errors), I’ve learned better ways to handle conditionals—keeping my code clean, readable, and future-me approved! 😆

Have you ever had an if-else nightmare? Let’s share our battle stories! ⚔️🔥

Let's Connect! 🎉
If you found this helpful and want to stay updated with more Flutter tips, feel free to follow me:

Dev.to: https://dev.to/thinnakrit

LinkedIn: https://www.linkedin.com/in/thinnakrit

GitHub: https://github.com/thinnakrit

Happy coding! 😊

Understanding MVC Architecture in Flutter

Thinnakrit — Mon, 17 Feb 2025 09:11:58 +0000

Hey there, Flutter devs! 🚀 When I first started building Flutter apps, I quickly realized how messy things could get without a proper structure. I tried different architectures, and after some trial and error, MVC (Model-View-Controller) really clicked for me. It keeps things clean, scalable, and easy to manage.

In this article, I’ll share what I’ve learned about MVC in Flutter—why I chose it, how I structured my projects, and what you need to know to use it effectively. If you’re struggling with unorganized code, I hope this will help you like it helped me. Let’s dive in! 😃

1. What is MVC?

Think of MVC as a way to keep your code organized like a well-arranged closet. 🏠 It splits your app into three key parts:

Model: Deals with the data and business logic. Like your wardrobe storing clothes.
View: Handles what the user sees. Think of it as the mirror showing your outfit.
Controller: The middleman, deciding which clothes (data) to show in the mirror (UI).

By separating concerns, your app becomes easier to scale and maintain!

2. Why Use MVC in Flutter?

At first, I wasn’t sure if MVC was the right fit for my Flutter apps. But after implementing it in a few projects, I noticed some huge benefits:

No More Messy Code! 🧹 Organizing my code made everything easier to navigate.
Easier to Scale 📈 When adding new features, I didn’t have to touch unrelated parts of the code.
Debugging is a Breeze 🔍 With clear separation, tracking issues was much simpler.

3. Structure of MVC in Flutter

Here’s how I typically structure my Flutter projects using MVC:

/lib
 ├── controllers
 │   ├── home_controller.dart
 │   ├── profile_controller.dart
 ├── models
 │   ├── user_model.dart
 │   ├── product_model.dart
 ├── views
 │   ├── home_view.dart
 │   ├── profile_view.dart
 ├── main.dart

Controllers: Handle user interactions and talk to the model.
Models: Store data and business logic.
Views: Display UI based on the controller’s instructions.

4. Implementing MVC in Flutter

Here’s a simple User Profile example that I built to test out MVC. 🧑‍💻

Model (User Model)

class User {
  String name;
  int age;

  User({required this.name, required this.age});
}

Controller (User Controller)

import '../models/user_model.dart';

class UserController {
  User user = User(name: "John Doe", age: 25);

  void updateUser(String newName, int newAge) {
    user = User(name: newName, age: newAge);
  }
}

View (User View)

import 'package:flutter/material.dart';
import '../controllers/user_controller.dart';

class UserView extends StatefulWidget {
  @override
  _UserViewState createState() => _UserViewState();
}

class _UserViewState extends State<UserView> {
  final UserController _controller = UserController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("User Profile")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Name: ${_controller.user.name}"),
            Text("Age: ${_controller.user.age}"),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _controller.updateUser("Jane Doe", 30);
                });
              },
              child: Text("Update User"),
            ),
          ],
        ),
      ),
    );
  }
}

5. Pros and Cons of MVC in Flutter

✅ Pros

Clean and organized code structure 🗂️
Easier to debug and test 🛠️
Works well for medium-sized apps 📱

❌ Cons

Extra boilerplate code 📝 (more files to manage)
Can become complex for very large applications 🚀

Conclusion

After using MVC in multiple projects, I can confidently say it’s a great way to structure your Flutter app! If you’re just starting out, I highly recommend giving it a try. However, for larger projects, you might also want to explore other state management solutions like Provider, Riverpod, or Bloc.

Let's Connect! 🎉

If you enjoyed this article and want more Flutter tips, follow me here:

Dev.to: https://dev.to/thinnakrit

LinkedIn: https://www.linkedin.com/in/thinnakrit

GitHub: https://github.com/thinnakrit

Happy coding! 🚀😊

Getting Started with Flutter Modular: My Journey to a More Organized Codebase

Thinnakrit — Sun, 16 Feb 2025 15:14:32 +0000

Introduction

Hey there, Flutter devs! 👋 Ever found yourself drowning in a spaghetti mess of routes and dependencies? Yeah, me too. When my Flutter project started growing, managing navigation and dependencies became a nightmare. That’s when I stumbled upon Flutter Modular, and let me tell you—it was a game changer! 🚀

In this article, I'll share my experience with Flutter Modular, why I love it, and how you can get started with it too. Let’s dive in!

What is Flutter Modular?
Why Did I Start Using It?
Setting Up Flutter Modular
Breaking Down Modules and Routes
Smooth Navigation Between Screens

1. What is Flutter Modular?

Think of Flutter Modular as your app’s superpower that keeps things tidy. It helps you organize your project by modularizing routes and dependencies. Instead of cluttering your main.dart with a ton of navigation logic, Flutter Modular keeps it clean and structured.

2. Why Did I Start Using It?

Okay, confession time—I used to hardcode my routes and manually pass dependencies everywhere. It worked for small projects, but as my app grew, maintaining it felt like playing Jenga with my sanity. 🤯

Then, I came across Flutter Modular, and suddenly, everything clicked:

No more scattered route management 🎯
Dependencies are injected where needed 🔥
My project became way easier to scale 📈

3. Setting Up Flutter Modular

Check it out: https://pub.dev/packages/flutter_modular

flutter pub add flutter_modular

Boom! You’re ready to roll. 🎉

4. Breaking Down Modules and Routes

In Flutter Modular, you create modules to structure your app. Here's how I structured mine:

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

import 'home_page.dart';
import 'about_page.dart';

class AppModule extends Module {
  @override
  List<Bind> get binds => [];

  @override
  List<ModularRoute> get routes => [
        ChildRoute('/', child: (_, __) => HomePage()),
        ChildRoute('/about', child: (_, __) => AboutPage()),
      ];
}

This makes it super easy to add or update routes without touching your main widget. Love it! ❤️

5. Smooth Navigation Between Screens

Navigation used to be a mess, but Modular makes it a breeze:

Modular.to.pushNamed('/about');

And when I want to go back:

Modular.to.pop();

So clean and simple, right? No more Navigator.of(context).push(...) everywhere! 😍

Wrapping It Up

Switching to Flutter Modular completely changed the way I structure my Flutter apps. If you're struggling with messy navigation and dependencies, I highly recommend giving it a try. It keeps your project modular, scalable, and easy to maintain.

I’d love to hear about your experience too—have you tried Flutter Modular? Let’s chat in the comments! 👇

Let's Connect! 🎉

If you found this helpful and want to stay updated with more Flutter tips, feel free to follow me:

Dev.to: https://dev.to/thinnakrit

LinkedIn: https://www.linkedin.com/in/thinnakrit

GitHub: https://github.com/thinnakrit

Happy coding! 😊

Flirty Texts: A Sweet Chat in CSS

Thinnakrit — Sun, 16 Feb 2025 02:11:10 +0000

This is a submission for Frontend Challenge - February Edition, CSS Art: February.

Inspiration

For this project, I was inspired by the idea of capturing a tender and flirtatious moment between two people in love, exchanging sweet messages through a chat app on iPhone. The challenge was to translate the emotions and atmosphere of their conversation into a visually appealing design.

Demo

https://codepen.io/thinnakrit/pen/YPzPmwv

Journey

This project was an enjoyable exercise in utilizing pure CSS to bring a simple yet effective design to life. By incorporating Tailwind CSS, I was able to streamline my code, keeping it both short and clean while still achieving a polished look. I'm particularly proud of how I was able to convey the emotional tone of the chat, even through such a minimalistic visual representation.

Next, I plan to refine the interactions further, possibly adding more dynamic.

Thanks for participating! I hope you enjoyed working on this project and that it helped you refine your CSS and design skills. It was great to see your creative approach to turning a sweet and intimate chat into a fun demo. Keep up the awesome work!

Understanding State in Flutter: My Experience & Lessons Learned

Thinnakrit — Fri, 14 Feb 2025 06:56:28 +0000

Managing state in Flutter? Oh boy, that was a rollercoaster ride for me! 🎢 When I first got into Flutter, handling state was one of the trickiest parts. I tried different approaches, hit roadblocks (a lot of them), and had my fair share of "Why is this not working?!" moments. So, here’s my experience—what worked, what didn’t, and how you can avoid some of the pain I went through. Let’s dive in!

What is State in Flutter? 🤔

Alright, let’s keep it simple. State is just the data that your UI depends on. If the state changes, your UI updates—like magic! 🎩✨

Flutter splits state into two types:

Ephemeral State – Short-lived and local to a widget (e.g., TextEditingController, animations).
App State – Global state that multiple widgets need access to (e.g., authentication, themes, user settings).

Different Ways to Manage State 🚀

Flutter gives us multiple ways to handle state, each with its own pros and cons. Let’s break them down!

1. `setState` – The Quick & Dirty Way

If your state is local to a single widget, setState is your best friend.

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Counter: $_counter')),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

Pros:
✅ Super simple
✅ No extra dependencies

Cons:
❌ Can get messy in larger apps
❌ Not great for shared state

2. InheritedWidget – The Hidden Gem

This is Flutter’s built-in way to pass state down the widget tree. It’s powerful but... kinda verbose.

Pros:
✅ No external dependencies
✅ Efficient state propagation

Cons:
❌ A bit too much boilerplate for my taste
❌ Can be tricky to use correctly

3. Provider – The Community Favorite

I love Provider! It’s simple, scalable, and widely used in Flutter apps.

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Then wrap your app with ChangeNotifierProvider and boom! Your state is now easily accessible.

Pros:
✅ Easy to use
✅ Scales well

Cons:
❌ Slight learning curve

4. Riverpod – Provider, But Cooler?

If Provider is good, Riverpod is like its smarter cousin. It removes some of the annoyances of Provider.

Pros:
✅ No BuildContext issues
✅ Cleaner API

Cons:
❌ Takes some getting used to

5. Bloc/Cubit – The Big Boss

If your app has complex state logic, Bloc is a lifesaver. It’s structured, predictable, and makes debugging easier.

Pros:
✅ Super organized
✅ Great for large apps

Cons:
❌ Lots of boilerplate
❌ Feels overkill for small projects

The Problems I Faced & How I Solved Them 🛠️

1. Unnecessary Widget Rebuilds – My app got laggy because of too many rebuilds! Using Selector in Provider or Bloc’s Equatable fixed this.

2. State Persistence – Lost data when navigating between screens? Either keep state globally (Provider) or save it locally with Hive.

3. Which One to Choose? – I wasted weeks switching between Provider, Riverpod, and Bloc. My advice? Start simple (setState), then scale up when needed.

My Takeaways 🎯

If you’re new, start with setState. Just get comfortable with state changes.
For medium-sized apps, Provider is your best bet.
If your app is getting complex, go for Riverpod or Bloc.

At the end of the day, there’s no perfect state management solution—it all depends on your app’s needs. My journey has been full of trial and error, but figuring out the right approach has made me a better Flutter developer.

What’s your favorite way to handle state in Flutter? Let’s chat in the comments! 🚀

Let's Connect! 🎉

If you found this helpful and want to stay updated with more Flutter tips, feel free to follow me:

Dev.to: https://dev.to/thinnakrit

LinkedIn: https://www.linkedin.com/in/thinnakrit

GitHub: https://github.com/thinnakrit

Happy coding! 😊

Understanding Layout Widgets in Flutter

Thinnakrit — Fri, 14 Feb 2025 04:47:06 +0000

Hey there, Flutter enthusiasts! 🎉 If you're diving into Flutter and want to master its layout system, you're in the right place. I love sharing my knowledge, and I hope this article helps you build beautiful and responsive UIs with ease. Let's explore some essential layout widgets together!

1. Container

Ref: https://api.flutter.dev/flutter/widgets/Container-class.html

The Container widget is one of the most commonly used widgets for layout. It allows you to apply padding, margins, borders, and decorations to its child.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Hello, Flutter!'),
)

2. Row and Column

Ref (Row): https://api.flutter.dev/flutter/widgets/Row-class.html
Ref (Column): https://api.flutter.dev/flutter/widgets/Column-class.html

The Row and Column widgets are fundamental for arranging widgets horizontally and vertically, respectively.

Row Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.star),
    Icon(Icons.favorite),
    Icon(Icons.share),
  ],
)

Column Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

3. Stack

Ref: https://api.flutter.dev/flutter/widgets/Stack-class.html

The Stack widget allows overlapping widgets on top of each other.

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.red),
    Positioned(
      top: 20,
      left: 20,
      child: Icon(Icons.star, color: Colors.white),
    ),
  ],
)

4. Expanded & Flexible

Ref (Expanded): https://api.flutter.dev/flutter/widgets/Expanded-class.html
Ref (Flexible): https://api.flutter.dev/flutter/widgets/Flexible-class.html

Sometimes, you need widgets to adjust their size dynamically. That’s where Expanded and Flexible come in handy!

Row(
  children: [
    Expanded(child: Container(color: Colors.red, height: 50)),
    Expanded(child: Container(color: Colors.blue, height: 50)),
  ],
)

5. ListView

Ref: https://api.flutter.dev/flutter/widgets/ListView-class.html

When dealing with lists, ListView is your best friend. It helps you create scrollable content effortlessly.

ListView(
  children: List.generate(10, (index) => ListTile(title: Text('Item $index'))),
)

Wrapping Up

I hope this breakdown of layout widgets makes your Flutter journey smoother. Layouts are the backbone of any great UI, so mastering them will take your apps to the next level. Keep experimenting, and most importantly, have fun coding! 🚀

Let's Connect! 🎉

If you found this helpful and want to stay updated with more Flutter tips, feel free to follow me:

Dev.to: https://dev.to/thinnakrit

LinkedIn: https://www.linkedin.com/in/thinnakrit

GitHub: https://github.com/thinnakrit

Happy coding! 😊

DEV Community: Thinnakrit

🧩 Ditch the .arb: Using SQLite for Flutter Translations Like a Pro

From if-else Chaos to Clean Code: My Developer Journey

Understanding MVC Architecture in Flutter

1. What is MVC?

2. Why Use MVC in Flutter?

3. Structure of MVC in Flutter

4. Implementing MVC in Flutter

5. Pros and Cons of MVC in Flutter

Conclusion

Let's Connect! 🎉

Getting Started with Flutter Modular: My Journey to a More Organized Codebase

Introduction

Table of Contents

1. What is Flutter Modular?

2. Why Did I Start Using It?

3. Setting Up Flutter Modular

4. Breaking Down Modules and Routes

5. Smooth Navigation Between Screens

Wrapping It Up

Let's Connect! 🎉

Flirty Texts: A Sweet Chat in CSS

Inspiration

Demo

Journey

Understanding State in Flutter: My Experience & Lessons Learned

What is State in Flutter? 🤔

Different Ways to Manage State 🚀

1. setState – The Quick & Dirty Way

2. InheritedWidget – The Hidden Gem

3. Provider – The Community Favorite

4. Riverpod – Provider, But Cooler?

5. Bloc/Cubit – The Big Boss

The Problems I Faced & How I Solved Them 🛠️

My Takeaways 🎯

Let's Connect! 🎉

Understanding Layout Widgets in Flutter

1. Container

2. Row and Column

3. Stack

4. Expanded & Flexible

5. ListView

Wrapping Up

Let's Connect! 🎉

1. `setState` – The Quick & Dirty Way