DEV Community: Eldho Paulose

RoutePilot — Flutter routing without the boilerplate

Eldho Paulose — Mon, 23 Mar 2026 06:47:59 +0000

Flutter's built-in navigation works fine for small apps. But the moment you need auth guards, deep links, typed arguments, and the ability to show a dialog without a BuildContext — you're either drowning in boilerplate or relying on a package that generates 500 lines of code every time you add a route.

I wanted something in between: a clean, composable API that covers 95% of real-world routing needs, ships as a single package, and stays out of the way.

That's RoutePilot — one singleton (routePilot) that handles push/pop, middleware, overlays, URL launching, and more.

✨ What's inside

Category	Capabilities
Navigation	Push, pop, replace, clear stack, pop-until by name or predicate
Transitions	9 built-in transitions with custom curves and durations
Deep Linking	Navigator 2.0 Router API with automatic browser URL sync
Middleware	Async guards with `FutureOr<String?>` redirect — auth, loading states
Typed Routes	`PilotRoute<TArgs, TReturn>` for compile-safe navigation
Route Groups	Shared prefix, middleware, and transition across related routes
Overlays	Dialogs, bottom sheets, snackbars, loading overlays — no `BuildContext`
URL Launcher	Browser, in-app WebView, phone calls, SMS, email
Observer	Built-in route stack tracking with `currentRoute` and `previousRoute`

🚀 Get started in 3 minutes

1. Install

# pubspec.yaml
dependencies:
  route_pilot: ^0.2.0

flutter pub get

2. Define your routes

abstract class PilotRoutes {
  static const String home    = '/';
  static const String profile = '/profile';
  static const String user    = '/user/:id';
}

final pages = [
  PilotPage(
    name: PilotRoutes.home,
    page: (ctx) => const HomePage(),
    transition: Transition.ios,
  ),
  PilotPage(
    name: PilotRoutes.profile,
    page: (ctx) => const ProfilePage(),
    transition: Transition.fadeIn,
    middlewares: [AuthGuard()], // 👈 guard this route
  ),
];

3. Wire up your app

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: routePilot.getRouterConfig(
        pages: pages,
        initialRoute: PilotRoutes.home,
        notFoundPage: PilotPage(
          name: '/404',
          page: (ctx) => const NotFoundPage(),
        ),
      ),
    );
  }
}

That's it — deep linking, browser URL sync, and the full navigation API are ready.

🗺️ Navigation API

// Push / pop
routePilot.toNamed('/profile');
routePilot.back();

// Pass arguments
routePilot.toNamed('/profile', arguments: {'userId': 42});
final id = routePilot.arg<int>('userId');

// Replace or clear the stack
routePilot.off('/home');    // replace current route
routePilot.offAll('/home'); // clear stack + push

// Path + query params → /user/42?tab=settings
routePilot.toNamed('/user/42?tab=settings');
final uid = routePilot.param('id');   // '42'
final tab = routePilot.param('tab'); // 'settings'

// Navigate directly to a widget (no route name needed)
routePilot.to(
  const DetailsPage(),
  transition: Transition.bottomToTop,
  transitionDuration: const Duration(milliseconds: 400),
  curve: Curves.easeInOut,
);

🎞️ All 9 transitions, zero config

Transition	Effect
`Transition.ios`	Native Cupertino swipe-back
`Transition.fadeIn`	Cross-fade
`Transition.rightToLeft`	Standard push slide
`Transition.leftToRight`	Slide from left
`Transition.bottomToTop`	Sheet-style rise
`Transition.topToBottom`	Drop-down
`Transition.scale`	Scale up from center
`Transition.rotate`	Rotation
`Transition.size`	Size expansion

Every transition accepts a custom curve and transitionDuration.

🔒 Async middleware — the right way to handle auth

Middleware runs before a route renders. Return a redirect path to block navigation, or null to allow it.

class AuthGuard extends PilotMiddleware {
  @override
  FutureOr<String?> redirect(String? route) async {
    final isLoggedIn = await checkAuthToken();
    if (!isLoggedIn) return '/login'; // redirect
    return null; // allow
  }
}

// Show a spinner while the guard resolves
routePilot.middlewareLoadingWidget =
    const Center(child: CircularProgressIndicator());

Middleware can be attached to individual PilotPages or shared across a PilotRouteGroup. Nested groups cascade automatically.

📦 Route groups — keep things organized

PilotRouteGroup(
  prefix: '/dashboard',
  middlewares: [AuthGuard()],
  transition: Transition.fadeIn,
  children: [
    PilotPage(name: '/home',     page: (ctx) => DashboardHome()),
    PilotPage(name: '/settings', page: (ctx) => SettingsPage()),
    // resolves to: /dashboard/home, /dashboard/settings
  ],
)

💬 Overlays without BuildContext

Show any overlay from a ViewModel, a service class, or anywhere else in your app — no context threading required.

// Dialog with a typed return value
final confirmed = await routePilot.dialog(AlertDialog(
  title: const Text('Delete item?'),
  actions: [
    TextButton(onPressed: () => routePilot.back(false), child: const Text('Cancel')),
    TextButton(onPressed: () => routePilot.back(true),  child: const Text('Delete')),
  ],
));

// SnackBar — queue-safe, clears any previous snackbar automatically
routePilot.snackBar('Saved!', backgroundColor: Colors.green);

// Non-dismissible full-screen loading overlay
routePilot.showLoading();
await uploadFile();
routePilot.hideLoading();

// Bottom sheet
routePilot.bottomSheet(
  const MyBottomSheetWidget(),
  isScrollControlled: true,
);

🧩 Typed routes — compile-time safety

// Define once
final userRoute = PilotRoute<PersonData, bool>('/user/:id');

// Push with type-safe args + auto path/query substitution
final result = await userRoute.push(
  arguments:   PersonData(id: 42, title: 'Eldho'),
  pathParams:  {'id': '42'},
  queryParams: {'tab': 'settings'},
);
// Navigates to: /user/42?tab=settings
// result is bool? — fully typed return value

🔗 URL Launcher & System Intents

// Open in browser / in-app browser / WebView
await routePilot.launchInBrowser(Uri.parse('https://flutter.dev'));
await routePilot.launchInAppBrowser(Uri.parse('https://dart.dev'));
await routePilot.launchInAppWebView(Uri.parse('https://pub.dev'));

// Phone, SMS, Email
await routePilot.makePhoneCall('+1-234-567-8900');
await routePilot.sendSms('+1-234-567-8900', body: 'Hello!');
await routePilot.sendEmail('hello@example.com', subject: 'Hi', body: 'From RoutePilot!');

🧭 Route observer

// Access current and previous route names from anywhere
final current  = routePilot.currentRoute;  // e.g. '/profile'
final previous = routePilot.previousRoute; // e.g. '/'

// Full route stack
final stack = routePilot.observer.routeStack;

Why not GetX or GoRouter?

GetX bundles state management, dependency injection, and routing together. If you only want routing, you're carrying a lot of extra weight.

GoRouter is the official recommendation, but middleware (redirects) requires working around the redirect callback in ways that don't handle async loading states well out of the box.

AutoRoute requires code generation — every time you add a route, you run the build runner.

RoutePilot is focused on routing only. Bring your own state manager. Zero code generation. Middleware is first-class, not a workaround.

By the numbers

9 built-in transitions
0 code generation steps
2 dependencies: flutter + url_launcher
MIT licensed

Try it

dependencies:
  route_pilot: ^0.2.0

The package ships with a full example app demonstrating:

Navigator 2.0 with deep linking
Typed routes and typed arguments
Auth guard middleware with redirect
Route groups with shared prefix
Every overlay type

Free Online Image Resizer (No Upload Required) — Resize JPG, PNG & WebP Instantly

Eldho Paulose — Sun, 01 Mar 2026 19:16:15 +0000

Looking for a free online image resizer that works instantly in your browser?

Resize JPG, PNG, and WebP images without uploading files or losing quality.

Many online image tools require uploading your images to a server, signing up, or waiting for processing. This can slow down your workflow and raise privacy concerns.

That's why I built Resizo — a simple browser-based image tool that resizes and converts images directly on your device.

👉 Try it here

https://www.resizo.in/

Why Image Resizing Matters

Images that are too large can:

Slow down websites
Increase page load time
Affect SEO performance
Use unnecessary storage space

For developers, bloggers, and designers, resizing images is a frequent task.

But traditional tools often require:

Uploading images to a server
Creating an account
Waiting for processing
Accepting reduced image quality

A browser-based tool removes these problems.

What Makes Resizo Different

Resizo processes images directly in your browser, meaning:

No uploads required
No account needed
Faster processing
Better privacy
Instant results

Your image never leaves your device.

Key Features

Instant Image Resizing

Resize images directly in your browser.

Supported formats:

JPG
PNG
WebP

Privacy Focused

Since everything runs locally in your browser, your files remain private.

Simple Interface

The tool is designed to be clean and easy to use without unnecessary steps.

Available Image Tools

Resizo also includes multiple tools for image optimization.

Resize Image for Social Media

Instagram Image Resizer

https://www.resizo.in/resize-image-for-instagram/
YouTube Image Resizer

https://www.resizo.in/resize-image-for-youtube/
Facebook Image Resizer

https://www.resizo.in/resize-image-for-facebook/
Twitter Image Resizer

https://www.resizo.in/resize-image-for-twitter/
LinkedIn Image Resizer

https://www.resizo.in/resize-image-for-linkedin/
WhatsApp Image Resizer

https://www.resizo.in/resize-image-for-whatsapp/

Image Optimization Tools

PNG Compressor

https://www.resizo.in/compress-png-online/
JPG to WebP Converter

https://www.resizo.in/jpg-to-webp-converter/

Who Can Use This Tool?

Resizo is useful for:

Developers

Quickly resize UI images, thumbnails, or assets.

Bloggers

Optimize blog images for faster loading pages.

eCommerce Sellers

Prepare product images for marketplaces and stores.

Social Media Creators

Resize images for different platform requirements.

Why Browser-Based Tools Are Better

Traditional image tools upload your images to a remote server. This can cause:

privacy risks
slower performance
file size limitations

With browser-based processing, images stay on your device and are processed instantly.

Try the Tool

If you're looking for a fast and private way to resize images, check it out here:

👉 https://www.resizo.in/

Final Thoughts

Image optimization is essential for websites, social media, and digital content.

Using a browser-based image resizer makes the process faster, safer, and easier without sacrificing quality.

If you regularly work with images, tools like Resizo can help simplify your workflow.

Creating a Responsive Flutter Application for All Devices

Eldho Paulose — Mon, 10 Jun 2024 08:33:27 +0000

Building a responsive application in Flutter ensures that your app provides a seamless experience across different devices, whether it’s a mobile phone, tablet, or desktop. In this blog post, we will explore how to make your Flutter app responsive by using various techniques and widgets.

Introduction
Setting Up Your Flutter Environment
Understanding MediaQuery
Using LayoutBuilder for Adaptive Layouts
Leveraging Flex Widgets (Row and Column)
Utilizing the Expanded and Flexible Widgets
Responsive Text Scaling
Platform-Specific Adjustments
Testing Responsiveness
Conclusion

1. Introduction

Responsive design is crucial for creating applications that offer an optimal user experience regardless of the device being used. In Flutter, there are multiple approaches and widgets that facilitate the development of responsive layouts. Let's dive into these methods.

2. Setting Up Your Flutter Environment

Before we start, ensure that your Flutter environment is set up. You can follow the official Flutter installation guide if you haven’t already.

flutter create responsive_app
cd responsive_app

Open your project in your preferred IDE (VS Code, Android Studio, etc.).

3. Understanding MediaQuery

The MediaQuery widget is a powerful tool in Flutter that provides information about the size and orientation of the current screen. It allows you to adjust your layout based on the screen dimensions.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveHomePage(),
    );
  }
}

class ResponsiveHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(title: Text('Responsive App')),
      body: Center(
        child: Text(
          'Screen width: ${screenSize.width}, height: ${screenSize.height}',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

4. Using LayoutBuilder for Adaptive Layouts

LayoutBuilder is another essential widget that builds a widget tree based on the parent widget's constraints.

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNarrowContainers();
          }
        },
      ),
    );
  }

  Widget _buildWideContainers() {
    return Row(
      children: [
        Expanded(child: Container(color: Colors.red, height: 200)),
        Expanded(child: Container(color: Colors.blue, height: 200)),
      ],
    );
  }

  Widget _buildNarrowContainers() {
    return Column(
      children: [
        Container(color: Colors.red, height: 200),
        Container(color: Colors.blue, height: 200),
      ],
    );
  }
}

Mobile View:

desktop View:

5. Leveraging Flex Widgets (Row and Column)

Row and Column are flexible widgets that can adapt to different screen sizes. Using these widgets effectively can help create responsive layouts.

class FlexLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(child: Container(color: Colors.green)),
                Expanded(child: Container(color: Colors.orange)),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(child: Container(color: Colors.blue)),
                Expanded(child: Container(color: Colors.purple)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Mobile View:

desktop View:

6. Utilizing the Expanded and Flexible Widgets

The Expanded and Flexible widgets control how a child of a Row, Column, or Flex flexes.

class ExpandedFlexibleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Container(color: Colors.red),
          ),
          Flexible(
            child: Container(color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

Mobile View:

desktop View:

7. Responsive Text Scaling

Ensure that your text scales appropriately by using the textScaler.

class ResponsiveText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Responsive Text',
          style: TextStyle(fontSize: 20),
          textScaler: MediaQuery.textScalerOf(context),
        ),
      ),
    );
  }
}

Mobile View:

desktop View:

8. Platform-Specific Adjustments

Adjust your layout based on the platform (iOS, Android, Web).

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Platform.isWindows ? _buildWindowsLayout() : _buildAndroidLayout(),
    );
  }

  Widget _buildWindowsLayout() {
    return Center(child: Text('Windows Layout'));
  }

  Widget _buildAndroidLayout() {
    return Center(child: Text('Android Layout'));
  }
}

Mobile View:

desktop View:

9. Testing Responsiveness

Test your app on multiple devices and screen sizes using the Flutter emulator or physical devices. You can also use tools like flutter_device_preview.

dependencies:
  flutter:
    sdk: flutter
  device_preview: ^0.8.0

import 'package:device_preview/device_preview.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode,
      builder: (context) => MyApp(),
    ),
  );
}

10. Conclusion

Making a Flutter app responsive involves understanding and using widgets like MediaQuery, LayoutBuilder, Row, Column, and more. By following these practices, you can ensure that your app provides a great user experience on any device.

Connect with Me

If you enjoyed this post and want to see more of my work, feel free to check out my GitHub and personal website:

GitHub: eldhopaulose
Website: Eldho Paulose
Resizo: Resizo

Flutter Fundamentals: Unwrapping the Essentials of Basic Widgets

Eldho Paulose — Fri, 07 Jun 2024 16:41:44 +0000

Introduction

Flutter, Google’s UI toolkit for crafting natively compiled applications for mobile, web, and desktop from a single codebase, has gained immense popularity. At the heart of Flutter are its widgets, the building blocks of any Flutter app. Understanding these widgets is crucial for any Flutter developer. In this blog, we will unwrap the essentials of basic Flutter widgets and how to use them.

What are Widgets in Flutter?

Widgets in Flutter describe what their view should look like given their current configuration and state. When a widget’s state changes, Flutter rebuilds the widget to reflect the changes. This declarative approach to UI development makes the code more predictable and easier to manage.

Basic Flutter Widgets

Scaffold

The Scaffoldwidget is the base of the visual interface and provides a structure to the app, such as an AppBar, Drawer, BottomNavigationBar, and more.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Demo'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Text

The Text widget is used to display a string of text with a single style.

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

Container

The Containerwidget is a versatile widget that can contain a single child widget, and allows you to customize its appearance with padding, margin, borders, and background color.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('I am inside a container'),
)

Row and Column

Row and Column widgets are used to arrange other widgets in a horizontal and vertical manner respectively.

Row Example:

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

Column Example:

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

Image

The Imagewidget is used to display images in your Flutter app.

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Icons

The Iconwidget is used to display Material icons.

Icon(
  Icons.favorite,
  color: Colors.pink,
  size: 24.0,
)

Button Widgets

Buttons are used to capture user interactions and can come in various forms such as ElevatedButton, TextButton, and IconButton.

ElevatedButton Example:

ElevatedButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Elevated Button'),
)

TextButton Example:

TextButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Text Button'),
)

IconButton Example:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('Pressed');
  },
)

Conclusion

These basic widgets form the foundation of any Flutter application. By mastering these, you will be well-equipped to build more complex interfaces. Remember, Flutter’s true power lies in its widget composition, allowing you to create sophisticated UIs from simple building blocks.

Connect with Me

If you enjoyed this post and want to see more of my work, feel free to check out my GitHub and personal website:

GitHub: eldhopaulose
Website: Eldho Paulose
Resizo: Resizo

Understanding Flutter Widgets: Column vs Row

Eldho Paulose — Thu, 30 May 2024 05:09:39 +0000

In Flutter, the layout design revolves around widgets. Two of the most essential layout widgets are Columnand Row. They control how child widgets are positioned vertically and horizontally, respectively. Let’s dive into the details and see them in action with example code.

The Column Widget

The Columnwidget in Flutter is used to align child widgets in a vertical manner. It’s similar to a vertical LinearLayoutin Android or a vertical StackPanelin UWP. Here’s a simple example:

In this example, the mainAxisAlignment property is set to MainAxisAlignment.center, which centers the children vertically. The crossAxisAlignment is set to CrossAxisAlignment.start, aligning the children to the start of the cross axis (horizontally in this case).

The Row Widget

Conversely, the Rowwidget arranges its children horizontally. It’s akin to a horizontal LinearLayoutin Android or a horizontal StackPanelin UWP. Here’s an example:

Here, mainAxisAlignmentis set to MainAxisAlignment.spaceEvenly, which distributes the children evenly across the horizontal axis with equal spacing.

Combining Column and Row

You can nest Rowand Columnwidgets to create complex layouts. Here’s a nested example:

In this nested layout, a Rowis placed inside a Column, combining both horizontal and vertical alignment.

Conclusion

Understanding the Columnand Rowwidgets is crucial for effective layout design in Flutter. Experiment with the properties and nesting to create the desired UI for your app.

Contact with me
GitHub

Resizo: Resizo

TS-BoilerplateX

Eldho Paulose — Mon, 20 May 2024 10:17:59 +0000

TS-BoilerplateX is a meticulously crafted boilerplate tailored for developers seeking a seamless starting point for building powerful web applications with TypeScript and Express.js. With TS-BoilerplateX, harness the combined benefits of TypeScript's static typing and Express.js' flexibility to expedite your development process while ensuring code integrity and maintainability.

Starting off

I've documented my process and highlighted the main components in this article. If you're eager to dive into the code right away, you can head straight to the repository:github

Features

TypeScript support
Express.js integration
ESLint for code linting
Example controllers and routes
Comprehensive documentation
EditorConfig for consistent coding style

Installation

To quickly create an application skeleton, you can utilize the TS-BoilerplateX tool. You can run the application generator using the npx command.

npx ts-boilerplatex

To install TS-BoilerplateX, you can use npm:

npm install ts-boilerplatex

-> dev: Start the development server with nodemon.
-> start: Start the application using ts-node to execute src/main.ts.
-> lint: Run ESLint to lint source files in the src/ directory.
-> docs: Generate documentation using Typedoc from src/main.ts.
-> build: Compile TypeScript files using the TypeScript compiler (tsc) based on the tsconfig.json configuration.
-> build-all: Clean the build directory, then run build, esbuild-node, and esbuild-browser scripts.
-> clean: Remove build artifacts and generated documentation.

Project Structure

The project structure is organized as follows:

TS-BoilerplateX/
|-- bin/
|   -- server.ts
|-- controller/
|   -- indexController.ts
|-- routes/
|   -- index.ts
|-- README.md
|-- package.json
|-- tsconfig.json
`-- ...

bin/: Contains the server configuration.
controller/: Contains controller functions to handle route logic.
routes/: Contains route definitions.

Middleware

Morgan Morgan middleware is used for logging HTTP requests. It's configured to log requests in the "dev" format.
bodyParser bodyParser middleware is used to parse incoming JSON and URL-encoded requests. It's configured to handle JSON and URL-encoded requests with extended mode enabled.
compression compression middleware compresses HTTP responses before sending them to the client.
cookieParser cookieParser middleware is used to parse cookies attached to incoming requests.

DEV Community: Eldho Paulose

RoutePilot — Flutter routing without the boilerplate

✨ What's inside

🚀 Get started in 3 minutes

1. Install

2. Define your routes

3. Wire up your app

🗺️ Navigation API

🎞️ All 9 transitions, zero config

🔒 Async middleware — the right way to handle auth

📦 Route groups — keep things organized

💬 Overlays without BuildContext

🧩 Typed routes — compile-time safety

🔗 URL Launcher & System Intents

🧭 Route observer

Why not GetX or GoRouter?

By the numbers

Try it

Links

Free Online Image Resizer (No Upload Required) — Resize JPG, PNG & WebP Instantly

Why Image Resizing Matters

What Makes Resizo Different

Key Features

Instant Image Resizing

Privacy Focused

Simple Interface

Available Image Tools

Resize Image for Social Media

Image Optimization Tools

Who Can Use This Tool?

Developers

Bloggers

eCommerce Sellers

Social Media Creators

Why Browser-Based Tools Are Better

Try the Tool

Final Thoughts

Creating a Responsive Flutter Application for All Devices

Table of Contents

1. Introduction

2. Setting Up Your Flutter Environment

3. Understanding MediaQuery

4. Using LayoutBuilder for Adaptive Layouts

5. Leveraging Flex Widgets (Row and Column)

6. Utilizing the Expanded and Flexible Widgets

7. Responsive Text Scaling

8. Platform-Specific Adjustments

9. Testing Responsiveness

10. Conclusion

Connect with Me

Flutter Fundamentals: Unwrapping the Essentials of Basic Widgets

Introduction

What are Widgets in Flutter?

Basic Flutter Widgets

Scaffold

Text

Container

Row and Column

Image

Icons

Button Widgets

Conclusion

Connect with Me

Understanding Flutter Widgets: Column vs Row

The Column Widget

The Row Widget

Combining Column and Row

Conclusion

TS-BoilerplateX

Starting off

Features

Installation

Project Structure

Middleware