DEV Community: Saina

Flutter Localization with gen-l10n + BLoC

Saina — Fri, 06 Jun 2025 06:22:08 +0000

"l10n" is short for localization — you take the first and last letter of the word and replace the middle characters with the number of characters skipped:

l o c a l i z a t i o n → l10n

You don't need to install this from pub.dev — it's part of Flutter SDK.
flutter_localizations,flutter_bloc,intl

📁 Step 1: Add ARB Files

First, create a folder:

lib/l10n

Then, create two files inside:

app_en.arb – English
app_ne.arb – Nepali

Here’s an example:

`lib/l10n/app_en.arb`

{
  "title1": "Hello World!",
  "description1": "Greetings from the digital realm...",
  "title2": "Localization",
  "description2": "Making apps speak multiple languages.",
  "title3": "Dynamic Switching",
  "description3": "Change languages on the fly!",
  "details": "Details",
  "home": "Home"
}

lib/l10n/app_ne.arb

{
  "title1": "नमस्ते संसार!",
  "description1": "डिजिटल संसारबाट शुभकामना...",
  "title2": "स्थानीयकरण",
  "description2": "एपलाई बहुभाषी बनाउने प्रक्रिया।",
  "title3": "डायनामिक स्विच",
  "description3": "भाषा तुरुन्त परिवर्तन गर्नुहोस्!",
  "details": "विवरण",
  "home": "गृहपृष्ठ"
}

⚙️ Step 2: Add l10n.yaml
Create a l10n.yaml file in your project root:

arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart output-class: AppLocalizations

📦 Step 3: Update pubspec.yaml
Add the following under the flutter section:

flutter:
  generate: true
  uses-material-design: true

Then run:

flutter gen-l10n

This will generate the AppLocalizations class under lib/l10n.

🧠 Step 4: Add Locale Support via BLoC

Bloc Event

final class ChangeLocale extends SettingsEvent {
  final Locale locale;
  ChangeLocale(this.locale);
}

State

final class SettingsState {
  final Locale locale;
  const SettingsState({this.locale = const Locale('en')});

  SettingsState copyWith({Locale? locale}) =>
      SettingsState(locale: locale ?? this.locale);
}

BLoC Handler

Future<void> _onChangeLocale(
  ChangeLocale event,
  Emitter<SettingsState> emit,
) async {
  emit(state.copyWith(locale: event.locale));
}

🏗️ Step 5: Configure MaterialApp
In your main widget, set up the localization config:

return MaterialApp(
  restorationScopeId: 'app',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
  locale: settingsState.locale,
  home: const LocalizedTextScreen(),
);

🖥️ Step 6: Use Localized Strings in Your Screen

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:xuno/features/settings/bloc/settings_bloc.dart';
import 'package:xuno/l10n/app_localizations.dart';

class LocalizedTextScreen extends StatelessWidget {
  const LocalizedTextScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SettingsBloc, SettingsState>(
      builder: (context, state) {
        final localizations = AppLocalizations.of(context)!;

        return Scaffold(
          backgroundColor: Colors.black,
          appBar: AppBar(
            title: Text(localizations.title1),
            backgroundColor: Colors.grey[900],
            actions: [
              Padding(
                padding: const EdgeInsets.only(right: 12.0),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton<Locale>(
                    dropdownColor: Colors.grey[850],
                    value: state.locale,
                    iconEnabledColor: Colors.white,
                    items: const [
                      DropdownMenuItem(
                        value: Locale('en'),
                        child: Text('🇬🇧 EN', style: TextStyle(color: Colors.white)),
                      ),
                      DropdownMenuItem(
                        value: Locale('ne'),
                        child: Text('🇳🇵 NE', style: TextStyle(color: Colors.white)),
                      ),
                    ],
                    onChanged: (locale) {
                      if (locale != null) {
                        context.read<SettingsBloc>().add(ChangeLocale(locale));
                      }
                    },
                  ),
                ),
              ),
            ],
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: ListView(
              children: [
                _buildSection(localizations.title1, localizations.description1),
                _buildSection(localizations.title2, localizations.description2),
                _buildSection(localizations.title3, localizations.description3),
                _buildSection(localizations.details, ''),
                _buildSection(localizations.home, ''),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildSection(String title, String description) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title,
              style: const TextStyle(
                  fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white)),
          const SizedBox(height: 4),
          if (description.isNotEmpty)
            Text(description,
                style: const TextStyle(fontSize: 16, color: Colors.white70)),
        ],
      ),
    );
  }
}

🧠 How It Works
Here’s a breakdown of the core logic:

AppLocalizations is generated from ARB files using gen-l10n.

BLoC listens to locale change events and updates the locale in SettingsState.

MaterialApp reads the locale from SettingsState and rebuilds with new localized strings.

The UI layer accesses translations via AppLocalizations.of(context).

Final Output
Your app is now fully localized and supports live language switching between English 🇬🇧 and Nepali 🇳🇵!

🔧 What is gen-l10n in Flutter?
gen-l10n is Flutter's built-in localization code generator.

It automatically generates a Dart class (like AppLocalizations) from your .arb files, which contain key-value pairs for different languages. This makes it easy to internationalize your app (i18n) and localize it (l10n) for specific languages.

Flutter Bloc

Saina — Tue, 04 Jun 2024 12:35:02 +0000

BLoC (Business Logic Component) separates business logic from UI in a Flutter application, ensuring a clean and testable codebase. It utilizes streams to handle events and states, allowing for a reactive approach to state management. By adopting BLoC, you can create scalable and maintainable applications that are easier to debug and test.

Key Components of BLoC

Event: Represents user actions or events within the app.
State: Represents the state of the UI based on events.
Bloc: Manages events and emits corresponding states.
BlocBuilder: Builds UI based on the current state.
BlocListener: Listens for state changes to perform side effects.
BlocProvider: Provides BLoC to the widget tree.

Creating a BLoC

Event: User Actions or Events
Events in BLoC are simple classes that represent user actions or events within the app. They are the triggers that cause the BLoC to react and emit new states. Events are dispatched to the BLoC using the add method.

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

In the above example, **IncrementEvent **and **DecrementEvent **are used to increase or decrease the counter.

State: UI State Based on Events
States are also simple classes that represent the UI's state. The BLoC emits new states in response to events. The UI rebuilds itself based on these states.

abstract class CounterState {}

class CounterInitial extends CounterState {
  final int counter;
  CounterInitial(this.counter);
}

Here, CounterInitial holds the counter value and is the state managed by the BLoC.

Bloc: Manages Events and States
The Bloc class is where the magic happens. It handles incoming events, processes them, and emits new states. The Bloc class extends the Bloc base class provided by the flutter_bloc package.

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial(0)) {
    on<IncrementEvent>((event, emit) {
      emit(CounterInitial((state as CounterInitial).counter + 1));
    });
    on<DecrementEvent>((event, emit) {
      emit(CounterInitial((state as CounterInitial).counter - 1));
    });
  }
}

In this example, the BLoC reacts to IncrementEvent and DecrementEvent by emitting a new state with the updated counter value.

BlocBuilder: Builds UI Based on State
BlocBuilder is a Flutter widget that rebuilds its UI in response to new states emitted by the BLoC. It listens to the BLoC and triggers a rebuild whenever a new state is emitted.

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    if (state is CounterInitial) {
      return Center(
        child: Text('Counter: ${state.counter}'),
      );
    }
    return Container();
  },
)

BlocBuilder rebuilds the Text widget with the current counter value whenever the state changes.

BlocListener: Listens for State Changes
BlocListener is another Flutter widget that listens for state changes but does not rebuild the UI. Instead, it allows you to perform side effects such as showing a SnackBar.

BlocListener<CounterBloc, CounterState>(
  listener: (context, state) {
    if (state is CounterInitial) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Counter: ${state.counter}')),
      );
    }
  },
  child: BlocBuilder<CounterBloc, CounterState>(
    builder: (context, state) {
      if (state is CounterInitial) {
        return Center(
          child: Text('Counter: ${state.counter}'),
        );
      }
      return Container();
    },
  ),
)

BlocListener shows a SnackBar with the current counter value whenever the state changes.

BlocProvider: Provides BLoC to the Widget Tree
BlocProvider is a Flutter widget that provides an instance of the BLoC to the widget tree. It ensures that the BLoC can be accessed from any descendant widget.

void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: MyApp(),
    ),
  );
}

BlocProvider wraps the MyApp widget, providing CounterBloc to the entire widget tree.

Conclusion

Understanding BLoC is essential for managing state in complex Flutter applications. With events, states, BlocBuilder, BlocListener, and BlocProvider, you can build scalable and maintainable apps. By following these examples, you can start using BLoC in your projects to improve code organization and maintainability.

Default Constructor and Named Constructor in Dart

Saina — Mon, 15 Jan 2024 07:10:15 +0000

//default consturctor

void main() {
  Book b = Book("a", "henry");
  var detail = b.deed();
  print(detail);
}

class Book {
  String? title;
  String? author;
  int? year;

  Book(this.title, this.author);
  String deed() {
    return ("${this.title}, ${this.author}");
  }
}

//named

void main() {
  Book b2 = Book.published("Sd", "ds", 2000);
  var detail = b2.deed();
  print(detail);
}

class Book {
  String? title;
  String? author;
  int? year;
  Book.published(this.author, this.title, this.year);
  String deed() {
    return ("${this.title},${this.author},${this.year}");
  }
}

Named constructors in Dart are used alongside default constructors to offer additional flexibility and clarity in object instantiation. While the default constructor provides a standard way to create objects, named constructors allow developers to define alternative initialization methods or configurations. This can enhance code readability, making it clear and organized. Named constructors are especially useful for scenarios where different sets of parameters or unique initialization logic are required. They can also be employed in factory patterns, providing a concise way to delegate object creation responsibilities to dedicated methods. Overall, named constructors contribute to code maintainability and expressiveness, offering developers multiple avenues for creating instances of a class with specific attributes or behaviors.

Function Parameters in Dart

Saina — Fri, 12 Jan 2024 10:40:46 +0000

3 types-

In Dart, you can use Required Positional Parameters to enforce that specific arguments must be provided when calling a function.

void main() {
  minus(7, 2, 1);
}

int minus(int a, int b, int c) {
  print(a - b - c);
}

Having many parameters makes things unclear, therefore in order to make the code easier to read and more streamlined, we've called Named Parameter. Arguments are now enclosed in a pair of curly brackets and given the name parameters. We must always include the parameter name when calling the function in order to pass this type of parameter. All of the data types must be made nullable, or must provide values or use required; in this instance, the parameters name are necessary; if we omit them, a compilation fault will occur.

main() {
  showStudents(7, name: "sdf", age: 65, dob: "4/55");
}

void showStudents(int? id, {required String name, int? age = 55, String? dob}) {
  // print("id: $id");
  print(id ?? 3);
  print("name: $name");
  print("age $age");
  print("dob $dob");
}

By enclosing your parameters inside square brackets, you can make them Optional Parameters. These parameters are now optional; if I don't pass them, the code will run without an error and return null. This time, I won't need to explicitly pass null for these parameters.
Additionally, you should note that if you make any of your parameters optional, they should also be nullable because the default value is null, or you can declare a default value.

void main() {
  showStudents("sdf");
}

void showStudents(String name, [int? age, int? dob]) {
  print("$name");
  print(age ?? 55);
  print("$dob");
}

Exploring Dart: Datatypes, Conditional Statements, and Operators

Saina — Wed, 10 Jan 2024 14:01:23 +0000

Datatypes:
Numbers: Dart supports integers and doubles. Integers represent whole numbers, while doubles represent floating-point numbers.

Strings: Strings are sequences of characters, enclosed within single (' ') or double (" ") quotes.

Booleans: Booleans represent two values: true and false, used for logical operations.

Lists: Lists are ordered collections of objects. They can be created using square brackets ([ ]) and can contain elements of different datatypes.

Maps: Maps are collections of key-value pairs, where each key maps to a value.

Conditional Statements:
if-else: Executes code based on a true/false condition.

int num = 10;
if (num > 0) {
  print("Number is positive");
} else {
  print("Number is not positive");
}

Switch Statements: Switch statements allow a program to execute different blocks of code based on the value of a variable.

String fruit = 'apple';
switch (fruit) {
  case 'apple':
    print('Selected fruit is an apple');
    break;
  default:
    print('Unknown fruit');
}

Operators:
Arithmetic: Addition (+), Subtraction (-), Multiplication (*), Division (/), Modulus (%).
Assignment: Assign (=).
Comparison: Equal to (==), Not equal to (!=), Greater than (>), Less than (<), Greater than or equal to (>=), Less than or equal to (<=).
Logical: Logical AND (&&), Logical OR (||), Logical NOT (!).

int a = 10;
int b = 5;
int maxValue = (a > b) ? a : b;
print('The maximum value is $maxValue');

Flutter vs React Native vs Native development (Kotlin/Swift)

Saina — Sun, 03 Dec 2023 09:03:16 +0000

Flutter: Google's creation, known for its unified codebase for iOS and Android. It boasts hot reload for real-time changes and offers a wide range of widgets, top performance, and visually appealing UIs.

React Native: From Facebook, uses JavaScript and React for cross-platform mobile app development. It offers a single codebase, native-like performance, a strong community, and rapid development potential.

Native Development (Kotlin/Swift): Building separate apps for Android (Kotlin) and iOS (Swift) allows for native performance, full access to platform-specific features, and the best user experience. Ideal for high-performance apps and leveraging specific platform capabilities.

Factors	Flutter	React Native	Kotlin/Swift
Performance	Good; efficient rendering with a dedicated graphic engine called Skia	Good; might have slight overhead	Excellent due to direct device feature access
Development Time	Reduced due to code reuse	Reduced due to code sharing	Longer due to separate codebases
UI/UX	Focuses on consistent UI/UX	Aims for native look and feel	Complete control over platform-specific designs
Community and Ecosystem	Growing community and ecosystem	Larger community; established ecosystem	Well-established, platform-specific ecosystems
Platform-Specific Features	Relies on plugins for some functionalities	Integrates platform-specific features	Direct access to platform-specific functionalities
Learning Curve	Uses Dart, accessible to web developers	Uses JavaScript and React, familiar to web developers	Requires learning platform-specific languages
Development Cost	Potentially lower due to code reuse	Lower due to code sharing	May be costlier due to separate codebases

Cross-platform vs Native Mobile Application Development

Saina — Sun, 03 Dec 2023 08:42:40 +0000

Cross-platform mobile app development involves creating applications that can run on multiple platforms (such as iOS and Android) using a single codebase. This approach aims to maximize code reusability and streamline the development process.

Native mobile app development, on the other hand, involves building separate applications for each target platform (iOS, Android, etc.) using platform-specific programming languages and development tools.

Here are some key differences:

Code Reusability:

Cross-platform: Allows developers to write code once and deploy it across multiple platforms (iOS, Android, etc.).
Native: Requires separate codebases for each platform, written in platform-specific languages like Swift for iOS and Kotlin for Android.

Performance:

Cross-platform: Might have a slight performance overhead due to abstraction layers between the code and the device's native features.
Native: Offers the best performance as it directly accesses device-specific functionalities.

Development Time:

Cross-platform: Reduces development time by reusing code across platforms, minimizing the need for separate development efforts.
Native: Typically takes longer due to the necessity of developing and maintaining separate codebases for each platform.

UI/UX Consistency:

Cross-platform: Strives to maintain consistent UI/UX across different platforms, although achieving perfect consistency might be challenging.
Native: Allows developers to create platform-specific designs, ensuring a native look and feel for each platform.

Access to Device Features:

Cross-platform: Might rely on third-party plugins or libraries to access certain device-specific features, which might lag behind the latest native functionalities.
Native: Offers direct access to all platform-specific features and APIs, providing complete control over the device's capabilities.

Community and Ecosystem:

Cross-platform: Might have a smaller ecosystem compared to native development, resulting in potentially fewer libraries, tools, and resources.
Native: Benefits from well-established and mature ecosystems specific to each platform, providing extensive resources and support.

Learning Curve:

Cross-platform: Tends to have a lower learning curve, especially for developers already familiar with web technologies.
Native: Requires learning platform-specific languages and development environments, potentially having a steeper learning curve.

Performance Optimization:

Cross-platform: Limited control over fine-tuning performance for specific platforms compared to native development.
Native: Offers greater control and optimization for each platform, ensuring maximum performance.

Long-Term Viability:

Cross-platform: Depends on the growth and stability of the specific cross-platform framework.
Native: Supported directly by the respective platform owners (Apple, Google), ensuring long-term support and updates.

Project-Specific Needs:

Cross-platform: Ideal for projects requiring rapid development cycles, moderate performance requirements, and reduced development costs.
Native: Best suited for projects where performance, platform-specific optimizations, and full control over the user experience are top priorities.

Both approaches have their advantages and drawbacks, and the choice between them often depends on project requirements, resource availability, and development objectives.

Mobile Development: The Basics

Saina — Sun, 03 Dec 2023 05:46:58 +0000

Today's smartphones are more than simply "phones"; they are individualized portals into our own small universes, serving as our everyday companions and evolving beyond simple communication devices. But what gives these gadgets their real life? It is the multiplicity of apps created by mobile developers to satisfy our varied needs.

Behind the scenes lies a meticulous coding endeavor. Developers dive into the intricate world of programming, sculpting these digital wonders. Through the use of several coding languages and frameworks, they give these applications life. While some focus on Android, utilizing Java/Kotlin within the Android Studio environment to tap into a vast user base, others specialize in iOS development, leveraging Swift in the Xcode environment catering to dedicated Apple enthusiasts. Then there's the fascinating field of cross-platform programming, which strives for faultless performance on several platforms.

Mobile development involves vital components that collaborate to create efficient applications. Here, are some crucial elements and commonly used tools in various aspects of mobile app development:

UI/UX Design: This involves the visual aspects users interact with, including buttons, menus, and screens. A well-crafted UI prioritizes aesthetics and usability. It entails understanding user behavior, creating intuitive navigation, and ensuring a seamless journey through the app. Tools such as Figma, Sketch, and Adobe XD assist in this design phase.

Frontend: The frontend refers to the client-side of the app that users directly interact with. It's about structuring and designing the app's layout, screens, and views to ensure a responsive and visually appealing user interface. Technologies like React Native, Flutter, and Xamarin are commonly used in this aspect of development.

Backend Development: The backend, or server-side of the app, manages data storage, logic, and interactions with the frontend. Technologies such as Node.js, Firebase, and Django play crucial roles in handling these backend functionalities.

API Integration: API integration enables seamless communication between different parts of the app, facilitating data exchange and functionality implementation. Tools like Swagger, Postman, and Insomnia are utilized to create and integrate these APIs.

Testing, Deployment, and Continuous Improvement: This stage ensures app quality through rigorous testing, seamless deployment, and continuous enhancements. Tools like Appium, Jenkins, and TestFlight support the testing and deployment processes, contributing to ongoing improvements for an exceptional user experience.

In conclusion, creativity and technology is instrumental in bringing ideas to life, shaping them from conception to completion Mobile development stands at the forefront, transforming our digital interactions by amalgamating intuitive interface designs with intricate backend integrations. Embracing these fundamental pillars sets the foundation for crafting top-tier, user-centric mobile applications.