Codes With Sunny

What’s New in Flutter 3.41

noreply@blogger.com (Sunny Singh) — Thu, 12 Feb 2026 06:30:00 +0000

Flutter 3.41 is now officially released by the Flutter team! This update focuses on community-driven improvements, transparency, modularity, platform polish, new APIs, and tooling enhancements — all designed to make Flutter more adaptable, faster, and easier to contribute to.

Introduction — Flutter 3.41 Overview

Flutter 3.41 marks a major step forward in how Flutter evolves as an open-source framework. Instead of focusing on one big feature, this release brings structural improvements that empower contributors, improve platform integrations, reduce app size, and enhance developer experience.

This release has 868 commits from 145 unique contributors, showing strong community participation.

1. Structural Transparency & Modularity

🗓 Public Stable Release Windows

Flutter is introducing public release windows to give the community clear visibility into when changes land in stable releases.

📌 Planned 2026 stable release schedule:

Flutter 3.41 — February
Flutter 3.44 — May
Flutter 3.47 — August
Flutter 3.50 — November

This lets developers plan ahead and target specific releases with confidence.

Decoupling Flutter’s Design Libraries

Flutter continues its push to separate Material and Cupertino design libraries into independent packages. This change:

✔ Enables faster design system updates
✔ Lets developers upgrade design libraries without upgrading the full Flutter SDK
✔ Helps the framework adapt quickly to platform UI trends (e.g., Material 3 expressive or future iOS design language shifts)

2. Ecosystem Standards & Platform Integration

📦 Swift Package Manager & iOS Lifecycle

Flutter now encourages plugin authors to switch from CocoaPods to Swift Package Manager, which aligns with the future direction of iOS. The framework also fully supports the UIScene lifecycle on iOS — modernizing app management for future Apple OS versions.

Android Gradle Plugin & Kotlin DSL

Flutter 3.41 continues to align with modern Android standards.

⚠ Important Note (official):
→ Android Gradle Plugin (AGP) 9 support is being audited for backwards compatibility.
If your app or plugins depend on AGP 9 right now, this support is not yet fully available.

Flutter also promotes the Kotlin DSL for Gradle builds, improving build clarity and flexibility.

3. Asset & Platform Optimizations

🎯 Platform-Specific Asset Bundling

Flutter now enables developers to specify which platforms should include certain assets using pubspec.yaml. This results in:

✔ Smaller app sizes
✔ Faster build times
✔ Better resource management for mobile, desktop, and web targets

Example:

 flutter:
  assets:
    - path: assets/logo.png
    - path: assets/web_worker.js
      platforms: [web]
    - path: assets/desktop_icon.png
      platforms: [windows, linux, macos]

4. Framework & API Improvements

🌀 RepeatingAnimationBuilder

A new animation primitive allows continuous looping animations (like loading indicators or shimmer effects) without boilerplate animation controllers.

Example usage:

 RepeatingAnimationBuilder(
  animatable: Tween(begin: Offset(-1,0), end: Offset(1,0)),
  repeatMode: RepeatMode.reverse,
  duration: Duration(seconds: 1),
  builder: (context, offset, child) => FractionalTranslation(
    translation: offset, child: child,
  ),
  child: const ColoredBox(color: Colors.green),
 ),

This greatly simplifies common UI patterns.

🪟 Navigation & Scrolling Enhancements

Flutter 3.41 introduces new navigation utility methods:

✔ Navigator.popUntilWithResult — Pop screens while returning values
✔ Improved overscroll and fling behaviors for smoother UI interactions

This benefits complex app flows with multi-step navigation.

5. Platform Fidelity Improvements

🍎 iOS Visual Polish

Flutter improves the bounded blur style to reduce color bleeding in translucent elements, resulting in smoother visuals on iOS.

🧲 Drag Handling & Desktop Behavior

New API improvements for drag handle behavior on sheets and desktop UI components give a more native feel across platforms.

Add-to-App Resizing

Improvement in Add-to-App (embedding Flutter in native apps) automatically resizes Flutter views based on content — no need for fixed container sizes. This is especially useful for hybrid-native workflows.

6. Accessibility & Web Enhancements

🧩 Accessibility Improvements

Flutter 3.41 adds native accessibility support for indicators like CircularProgressIndicator and respects user text spacing overrides on web — improving inclusive UX.

7. DevTools & Performance

🐞 DevTools Performance Boost

Flutter DevTools are now compiled with dart2wasm, improving performance and responsiveness during profiling and debugging.

Automatic retry on dropped connections also smooths the debugging workflow.

Key Takeaways — Should You Upgrade?

👍 Why You Should

✔ Improved contribution experience
✔ Modular design libraries
✔ More predictable release cadence
✔ Better asset optimization
✔ Animation and navigation enhancements
✔ Accessibility and web improvements

This release is especially strong for teams working on long-term projects that value stability and maintainability.

Conclusion — Flutter 3.41 in Perspective

Flutter 3.41 is less about flashy new UI components and more about structural evolution and ecosystem maturity.
It empowers both app developers and contributors by offering:

🔹 Transparency in release planning
🔹 Modular design systems
🔹 Deeper platform integrations
🔹 Better performance tools
🔹 Strong community contribution support

This release signals confidence in Flutter’s long-term roadmap → one that’s more open, predictable, and developer-centric than ever before.

Flutter Travel Search & Result UI Design – Step-by-Step Guide with Source Code

noreply@blogger.com (Sunny Singh) — Fri, 19 Dec 2025 11:10:00 +0000

Flutter Travel Search & Result UI Design (Step-by-Step)

Flutter is a powerful UI framework that allows developers to build beautiful, fast, and cross-platform mobile applications using a single codebase.

In this tutorial, we will create a Flutter Travel Search & Result UI inspired by modern travel apps like Airbnb, Booking.com, and Agoda.
This UI is perfect for hotel booking, rental, and travel planning apps.

Features of Flutter Travel Search UI

✔ Modern & clean UI design
✔ Travel category selection (Trip, Staycation, Long Stay)
✔ Date selection layout
✔ Price range slider
✔ Travel search result listing
✔ Reusable Flutter widgets
✔ Beginner-friendly UI structure

1. Travel Search Screen

The Travel Search Screen allows users to:

Select destination
Choose travel category
Pick date range
Set budget using price slider
Tap on Search & Find button

This screen focuses on user experience and simplicity.

2. Travel Search Result Screen

After searching, users can see:

Hotel / stay listing
Price per month
Distance from destination
Ratings and reviews
Card-based modern layout

This screen is optimized for real-world travel apps.

Flutter UI Design Approach

To build this Flutter UI, we use:

Scaffold for page structure
Column & Row for layout
Container with BoxDecoration
ListView.builder for results
RangeSlider for price filter
Custom reusable widgets

This approach keeps the code clean, scalable, and maintainable.

Flutter Travel Search UI

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:intl/intl.dart';


class FindHousingScreen extends StatefulWidget {
  const FindHousingScreen({Key? key}) : super(key: key);

  @override
  State createState() => _FindHousingScreenState();
}

class _FindHousingScreenState extends State {
  RangeValues priceRange = const RangeValues(20, 250);
  int selectedCategory = 0;
  DateTimeRange? selectedDateRange;

  String getDateRangeText() {
    if (selectedDateRange == null) {
      return '23 - 25 November 2021  (3 days)';
    }
    final start = DateFormat('dd MMM yyyy').format(selectedDateRange!.start);
    final end = DateFormat('dd MMM yyyy').format(selectedDateRange!.end);
    final days = selectedDateRange!.duration.inDays + 1;
    return '$start - $end  ($days days)';
  }

  Future selectDateRange() async {
    final DateTimeRange? picked = await showDateRangePicker(
      context: context,
      firstDate: DateTime.now(),
      lastDate: DateTime.now().add(const Duration(days: 365)),
      initialDateRange:
          selectedDateRange ??
          DateTimeRange(
            start: DateTime.now(),
            end: DateTime.now().add(const Duration(days: 2)),
          ),
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            colorScheme: const ColorScheme.light(
              primary: Color(0xFFFF8C42),
              // selected date and header
              onPrimary: Colors.white,
              surface: Colors.white,
              // calendar surface
              background: Colors.white,
              // full background
              onSurface: Colors.black87,
              surfaceVariant: Colors.white,
              // month grid bg
              onSurfaceVariant: Colors.black87,
            ),
            scaffoldBackgroundColor: Colors.white,
            dialogBackgroundColor: Colors.white,
            canvasColor: Colors.white,
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(foregroundColor: Color(0xFFFF8C42)),
            ),
          ),
          child: child!,
        );
      },
    );

    if (picked != null) {
      setState(() {
        selectedDateRange = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 20, color: Colors.black),
          onPressed: () {},
        ),
        title: const Text(
          'Find housing',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.only(left: 15.0, right: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 20),

                // Destination
                const Text(
                  'Destination',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.18),
                        offset: const Offset(4, 4),
                        blurRadius: 8,
                      ),
                      BoxShadow(
                        color: Colors.orange.withOpacity(0.05),
                        offset: const Offset(-3, -3),
                        blurRadius: 6,
                      ),
                    ],
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Row(
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            image: const DecorationImage(
                              image: NetworkImage(
                                'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=100&h=100&fit=crop',
                              ),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        const SizedBox(width: 12),
                        const Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Squid Tower Building',
                                style: TextStyle(
                                  fontSize: 15,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                              SizedBox(height: 4),
                              Text(
                                'Jl. Kembang Melati 123 A, South Jakarta',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: Colors.grey,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 24),

                // Travel categories
                const Text(
                  'Travel categories',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12),
                Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        buildCategoryButton('Trip', 0),
                        const SizedBox(width: 8),
                        buildCategoryButton('Staycation', 1),
                        const SizedBox(width: 8),
                        buildCategoryButton('Stay long', 2),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                const Text(
                  'Trip category: < 7 days',
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
                const SizedBox(height: 24),

                // Date arrival and check-in with Calendar
                const Text(
                  'Date arrival & check-in',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12),
                InkWell(
                  onTap: selectDateRange,
                  borderRadius: BorderRadius.circular(12),
                  child: Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 14,
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey.shade300),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: Text(
                            getDateRangeText(),
                            style: const TextStyle(
                              fontSize: 14,
                              color: Colors.black87,
                            ),
                          ),
                        ),
                        Icon(
                          Icons.calendar_today,
                          size: 18,
                          color: Colors.grey.shade600,
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 40),

                // Price range
                const Text(
                  'Price range',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        pricePill('\$${priceRange.start.round()}'),
                        Expanded(
                          child: Container(
                            height: 1,
                            color: Colors.grey.shade300,
                          ),
                        ),
                        pricePill('\$${priceRange.end.round()}'),
                      ],
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                SliderTheme(
                  data: SliderThemeData(
                    activeTrackColor: const Color(0xFFFF8C42),
                    inactiveTrackColor: Colors.grey.shade300,
                    thumbColor: const Color(0xFFFF8C42),
                    overlayColor: const Color(0xFFFF8C42).withOpacity(0.2),
                    thumbShape: const RoundSliderThumbShape(
                      enabledThumbRadius: 10,
                    ),
                    trackHeight: 4,
                  ),
                  child: RangeSlider(
                    values: priceRange,
                    min: 0,
                    max: 500,
                    onChanged: (RangeValues values) {
                      setState(() {
                        priceRange = values;
                      });
                    },
                  ),
                ),
                const Spacer(),

                // Search button
                SizedBox(
                  width: double.infinity,
                  height: 56,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(18),
                      gradient: const LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.topRight,
                        colors: [Color(0xFFF7903A), Color(0xFFF15907)],
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.30),
                          blurRadius: 10,
                          offset: const Offset(0, 6),
                        ),
                        BoxShadow(
                          color: Colors.white.withOpacity(0.35),
                          blurRadius: 4,
                          offset: const Offset(0, -2),
                        ),
                      ],
                    ),
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder:
                                (context) => const SearchingResultsScreen(),
                          ),
                        );
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.transparent,
                        shadowColor: Colors.transparent,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18),
                        ),
                      ),
                      child: const Text(
                        'Search & Find',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget pricePill(String text) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 15),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: Text(
        text,
        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
      ),
    );
  }

  Widget buildCategoryButton(String text, int index) {
    final bool isSelected = selectedCategory == index;
    return Expanded(
      child: GestureDetector(
        onTap: () {
          setState(() {
            selectedCategory = index;
          });
        },
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          decoration: BoxDecoration(
            gradient:
                isSelected
                    ? const LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Color(0xFFF09C52),
                        Color(0xFFf6741e),
                        Color(0xFFF15907),
                      ],
                    )
                    : null,
            color: isSelected ? null : const Color(0xFFF6F7FC),
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.transparent),
            boxShadow:
                isSelected
                    ? [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.30),
                        offset: const Offset(0, 8),
                        blurRadius: 18,
                      ),
                      BoxShadow(
                        color: Colors.white.withOpacity(0.35),
                        offset: const Offset(-2, -2),
                        blurRadius: 6,
                      ),
                    ]
                    : [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.10),
                        offset: const Offset(0, 4),
                        blurRadius: 10,
                      ),
                    ],
          ),
          child: Center(
            child: Text(
              text,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: isSelected ? Colors.white : Colors.black87,
              ),
            ),
          ),
        ),
      ),
    );
  }
 }

Flutter Travel Result UI

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:intl/intl.dart';

class SearchingResultsScreen extends StatefulWidget {
  const SearchingResultsScreen({Key? key}) : super(key: key);

  @override
  State createState() => _SearchingResultsScreenState();
}

class _SearchingResultsScreenState extends State {
  final Set bookmarkedItems = {};

  void toggleBookmark(String itemIdentifier) {
    // Note: toggleBookmark
    setState(() {
      print("Toggling: $itemIdentifier"); // Debug line
      print("Before: ${bookmarkedItems.contains(itemIdentifier)}");

      if (bookmarkedItems.contains(itemIdentifier)) {
        bookmarkedItems.remove(itemIdentifier);
      } else {
        bookmarkedItems.add(itemIdentifier);
      }
    });
  }

  bool _isBookmarked(String itemIdentifier) {
    return bookmarkedItems.contains(itemIdentifier);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            'Searching results',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 15.0, right: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 24),

            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  // bottom-right shadow (depth)
                  BoxShadow(
                    color: Colors.black.withOpacity(0.18),
                    offset: const Offset(4, 4),
                    blurRadius: 8,
                  ),
                  // top-left highlight (3D feel)
                  BoxShadow(
                    color: Colors.orange.withOpacity(0.05),
                    offset: const Offset(-3, -3),
                    blurRadius: 6,
                  ),
                ],
              ),

              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Row(
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        image: const DecorationImage(
                          image: NetworkImage(
                            'https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=100&h=100&fit=crop',
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),

                    const SizedBox(width: 12),
                    const Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Text(
                                "Near",
                                style: TextStyle(
                                  fontSize: 15,
                                  color: Colors.black,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                              SizedBox(width: 4),
                              Text(
                                'Squid Tower Building',
                                style: TextStyle(
                                  fontSize: 15,
                                  color: Color(0xFF91633a),
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 4),
                          Text(
                            'Jl. Kembang Melati 123 A, South Jakarta',
                            style: TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 20),

            // Results count and filter
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  '36 housing items found',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.black87,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 12,
                    vertical: 8,
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade300),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.tune, size: 16, color: Colors.grey.shade700),
                      const SizedBox(width: 6),
                      Text(
                        'Edit filter',
                        style: TextStyle(
                          fontSize: 13,
                          color: Colors.grey.shade700,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),

            // Housing list
            Expanded(
              child: ListView(
                children: [
                  buildHousingCard(
                    'Kalibata City',
                    'Hotel',
                    '1.2 km away',
                    75,
                    5.0,
                    'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400&h=300&fit=crop  ',
                  ),
                  const SizedBox(height: 16),
                  buildHousingCard(
                    'The Linden Tower',
                    'Apartment',
                    '3.2 km away',
                    95,
                    4.5,
                    'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=400&h=300&fit=crop  ',
                  ),
                  const SizedBox(height: 16),
                  buildHousingCard(
                    'White Green House',
                    'Dormitory',
                    '3.8 km away',
                    25,
                    4.5,
                    'https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?w=400&h=300&fit=crop  ',
                  ),
                  const SizedBox(height: 16),
                  buildHousingCard(
                    'Brutalism House',
                    'Sharing Room',
                    '5.2 km away',
                    35,
                    3.5,
                    'https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=400&h=300&fit=crop  ',
                  ),
                  const SizedBox(height: 16),
                  buildHousingCard(
                    'Deep Villa',
                    'Sharing Room',
                    '5.2 km away',
                    35,
                    4.5,
                    'https://amazingarchitecture.com/storage/files/1/Architecture%20firms/Atrey%20&%20Associates/Deep%20Villa/08.1-Deep-Villa-Atrey-and-Associates-New-Delhi-ndia-Amazing-Architecture.jpg  ',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildHousingCard(
    String name,
    String type,
    String distance,
    int price,
    double rating,
    String imageUrl,
  ) {
    // Check if current item is bookmarked
    bool isBookmarked = _isBookmarked(imageUrl);

    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.18),
            blurRadius: 16,
            offset: const Offset(0, 10),
          ),
          BoxShadow(
            color: Colors.black.withOpacity(0.06),
            blurRadius: 6,
            offset: const Offset(0, 3),
          ),
          BoxShadow(
            color: Colors.white.withOpacity(0.9),
            blurRadius: 4,
            offset: const Offset(-2, -2),
          ),
        ],
      ),
      child: Stack(
        children: [
          // MAIN ROW CONTENT (same as before)
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 90,
                height: 90,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  image: DecorationImage(
                    image: NetworkImage(imageUrl.trim()),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      style: const TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(height: 3),
                    Text(
                      type,
                      style: TextStyle(
                        fontSize: 13,
                        color: Colors.grey.shade600,
                      ),
                    ),
                    const SizedBox(height: 3),
                    Text(
                      distance,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey.shade600,
                      ),
                    ),
                    const SizedBox(height: 5),
                    Row(
                      children: [
                        Text(
                          '\$$price',
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFFb17d58),
                          ),
                        ),
                        const Text(
                          '/month',
                          style: TextStyle(fontSize: 12, color: Colors.grey),
                        ),
                        const Spacer(),
                        const Icon(
                          Icons.star,
                          size: 16,
                          color: Color(0xFFFFC107),
                        ),
                        const SizedBox(width: 4),
                        Text(
                          rating.toString(),
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),

          // 🔖 BOOKMARK (TOP RIGHT) - UPDATED WITH FUNCTIONALITY
          Positioned(
            top: 0,
            right: 0,
            child: GestureDetector(
              // Add gesture detector for tap interaction
              onTap: () {
                print("dkfndjk");
                toggleBookmark(imageUrl.trim());
              }, // Toggle bookmark on tap
              child: Container(
                padding: const EdgeInsets.all(6),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.18),
                      blurRadius: 10,
                      offset: const Offset(0, 6),
                    ),
                    BoxShadow(
                      color: Colors.white.withOpacity(0.9),
                      blurRadius: 4,
                      offset: const Offset(-2, -2),
                    ),
                  ],
                ),
                child: SvgPicture.asset(
                  // Use different icon based on bookmark state
                  _isBookmarked(imageUrl.trim())
                      ? AppImages.bookmarkIcon
                      : AppImages.unfillIcon,
                  color: const Color(0xFF91633a),
                  height: 15,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
 }

Building a Modern Travel App UI with Flutter

noreply@blogger.com (Sunny Singh) — Thu, 18 Dec 2025 13:27:00 +0000

In this tutorial, we build a modern travel booking app UI using Flutter.
The design emphasises a premium look, featuring gradient headers, category chips, horizontal trip cards, and a detailed property screen.
This UI is inspired by real-world travel and rental apps, demonstrating clean layouts, reusable widgets, and smooth navigation.

Flutter Travel App UI – Complete Code Implementation

HomeScreenUI

import 'package:conteudo_local/app/data/services/api_service/app_imports.dart';
import 'package:flutter/material.dart';

class HomeScreenUI extends StatelessWidget {
  const HomeScreenUI({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Top Card with Search
              Container(
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xFF161928),
                      Color(0xFF586378),
                      Color(0xFF262d3d),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(30),
                ),
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Profile and notification
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(30),
                                border: Border.all(
                                  color: Colors.black.withOpacity(.3),
                                  width: 3,
                                ),
                              ),
                              child: CircleAvatar(
                                radius: 20,
                                backgroundColor: Colors.white,
                                child: ClipOval(
                                  child: Image.network(
                                    'https://i.pravatar.cc/150?img=5',
                                    fit: BoxFit.cover,
                                    width: 40,
                                    height: 40,
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(width: 12),
                            const Text(
                              'Hai, Magdalena!',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(30),
                            border: Border.all(
                              color: Color(0xFF161928).withOpacity(.3),
                              width: 5,
                            ),
                          ),
                          child: Container(
                            padding: const EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                            ),
                            child: Image.asset(
                              AppImages.notificationPngIcon,
                              height: 20,
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 30),
                    // Title
                    const Text(
                      'Where do\nyou want to go?',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 32,
                        fontWeight: FontWeight.bold,
                        height: 1.2,
                      ),
                    ),
                    const SizedBox(height: 20),
                    // Search Bar
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.only(left: 15.0),
                        child: TextField(
                          decoration: InputDecoration(
                            hintText: 'Search your destination point',
                            hintStyle: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 14,
                            ),
                            border: InputBorder.none,
                            suffixIcon: Container(
                              margin: const EdgeInsets.all(6),
                              // thoda gap for shadow
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(30),
                                boxShadow: [
                                  // dark shadow (bottom-right)
                                  BoxShadow(
                                    color: Colors.orange.withOpacity(0.5),
                                    offset: const Offset(3, 3),
                                    blurRadius: 10,
                                  ),
                                  // light highlight (top-left)
                                  BoxShadow(
                                    color: Colors.white.withOpacity(0.9),
                                    offset: const Offset(-2, -2),
                                    blurRadius: 4,
                                  ),
                                ],
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Image.asset(
                                  AppImages.searchIcon,
                                  height: 20,
                                ),
                              ),
                            ),

                            contentPadding: const EdgeInsets.symmetric(
                              vertical: 15,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 30),
              // Travel Categories
              const Text(
                'Travel categories',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF2C3E50),
                ),
              ),
              const SizedBox(height: 15),
              SizedBox(
                height: 60,
                child: ListView(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  children: [
                    buildCategoryChip('🎒', 'Trip', true),
                    const SizedBox(width: 10),

                    buildCategoryChip('🏖️', 'Staycation', false),
                    const SizedBox(width: 10),

                    buildCategoryChip('🏡', 'Stay In', false),
                    const SizedBox(width: 10),

                    buildCategoryChip('🌾🏡', 'Farm', false), // Farm House
                    const SizedBox(width: 10),

                    buildCategoryChip('🏘️✨', 'Villa', false), // Villa
                  ],
                ),
              ),
              // Top Trips
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    'Top trips',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF2C3E50),
                    ),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: Row(
                      children: const [
                        Text(
                          'Explore',
                          style: TextStyle(color: Colors.grey, fontSize: 14),
                        ),
                        SizedBox(width: 5),
                        Icon(Icons.arrow_forward, color: Colors.grey, size: 16),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 15),
              // Trip Cards
              SizedBox(
                height: 280,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    buildTripCard(
                      context,
                      'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=400',
                      'Kalibata City',
                      'Apartment',
                      '\$150',
                    ),
                    const SizedBox(width: 15),
                    buildTripCard(
                      context,
                      'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=400',
                      'Linden Tower',
                      'Hotel',
                      '\$50',
                    ),
                    const SizedBox(width: 15),

                    buildTripCard(
                      context,
                      'https://www.dellaresorts.com/new-images/enclave-ex-new-2-feb-1.webp',
                      'Luxury Enclave',
                      'Villa',
                      '\$50',
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: Container(
        margin: const EdgeInsets.all(25),
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 20,
              offset: const Offset(0, 5),
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Image.asset(AppImages.homePngIcon, height: 28),
            Image.asset(AppImages.direction, height: 28, color: Colors.grey),
            Container(
              padding: const EdgeInsets.all(15),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: const LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFFFF8C42), // orange
                    Color(0xFFFF6B35), // deep orange
                  ],
                ),
                boxShadow: [
                  // bottom-right shadow (depth)
                  BoxShadow(
                    color: Colors.black.withOpacity(0.25),
                    offset: const Offset(4, 4),
                    blurRadius: 10,
                  ),
                  // top-left highlight (3D effect)
                  BoxShadow(
                    color: Colors.white.withOpacity(0.6),
                    offset: const Offset(-4, -4),
                    blurRadius: 10,
                  ),
                ],
              ),
              child: Image.asset(
                AppImages.searchIcon,
                height: 28,
                color: Colors.white,
              ),
            ),

            Image.asset(AppImages.disLikeIcon, height: 28, color: Colors.grey),
            Stack(
              children: [
                Image.asset(AppImages.shop, height: 28, color: Colors.grey),
                Positioned(
                  right: 0,
                  top: -4,
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: const BoxDecoration(
                      color: Color(0xFFFF6B35),
                      shape: BoxShape.circle,
                    ),
                    child: const Text(
                      '2',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 10,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget buildCategoryChip(String emoji, String label, bool isSelected) {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0, bottom: 8, left: 5),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        decoration: BoxDecoration(
          color: isSelected ? Colors.white : Colors.grey[200],
          borderRadius: BorderRadius.circular(20),
          border: Border.all(
            color: isSelected ? Colors.transparent : Colors.grey[300]!,
          ),
          boxShadow:
              isSelected
                  ? [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.1),
                      blurRadius: 10,
                      offset: const Offset(0, 3),
                    ),
                  ]
                  : [],
        ),
        child: Row(
          children: [
            Text(emoji, style: const TextStyle(fontSize: 16)),
            const SizedBox(width: 8),
            Text(
              label,
              style: TextStyle(
                color: isSelected ? const Color(0xFF2C3E50) : Colors.grey,
                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
                fontSize: 14,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildTripCard(
    BuildContext context,
    String imageUrl,
    String title,
    String subtitle,
    String price,
  ) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder:
                  (context) => DetailScreen(
                    imageUrl: imageUrl,
                    title: title,
                    subtitle: subtitle,
                    price: price,
                  ),
            ),
          );
        },
        child: Container(
          width: 180,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 10,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        boxShadow: [
                          // main shadow (bottom)
                          BoxShadow(
                            color: Colors.black.withOpacity(0.5),
                            blurRadius: 18,
                            offset: const Offset(0, 10),
                          ),
                          // soft ambient shadow
                          BoxShadow(
                            color: Colors.black.withOpacity(0.05),
                            blurRadius: 6,
                            offset: const Offset(0, 3),
                          ),
                        ],
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(20),
                        child: Image.network(
                          imageUrl,
                          height: 160,
                          width: 160,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),

                  Positioned(
                    top: 15,
                    right: 15,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 5,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.9),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Text(
                        price,
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.all(12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                        color: Color(0xFF2C3E50),
                      ),
                    ),
                    const SizedBox(height: 4),
                    Row(
                      children: [
                        Text(
                          subtitle,
                          style: TextStyle(
                            color: Colors.grey[600],
                            fontSize: 12,
                          ),
                        ),
                        const Spacer(),
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(30),
                            boxShadow: [
                              // dark shadow (bottom-right)
                              BoxShadow(
                                color: Colors.black.withOpacity(0.5),
                                offset: const Offset(3, 3),
                                blurRadius: 10,
                              ),
                              // light highlight (top-left)
                              BoxShadow(
                                color: Colors.white.withOpacity(0.9),
                                offset: const Offset(-2, -2),
                                blurRadius: 4,
                              ),
                            ],
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Image.asset(
                              AppImages.disLikeIcon,
                              height: 20,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

DetailsUI

import 'package:conteudo_local/app/data/services/api_service/app_imports.dart';
import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String subtitle;
  final String price;

  const DetailScreen({
    Key? key,
    required this.imageUrl,
    required this.title,
    required this.subtitle,
    required this.price,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Image with overlay
                  Stack(
                    children: [
                      Stack(
                        children: [
                          ClipRRect(
                            borderRadius: const BorderRadius.only(
                              bottomLeft: Radius.circular(30),
                              bottomRight: Radius.circular(30),
                            ),
                            child: Image.network(
                              imageUrl,
                              height: 600,
                              width: double.infinity,
                              fit: BoxFit.cover,
                            ),
                          ),

                          // 🔥 Black gradient overlay
                          Positioned.fill(
                            child: Container(
                              decoration: BoxDecoration(
                                borderRadius: const BorderRadius.only(
                                  bottomLeft: Radius.circular(30),
                                  bottomRight: Radius.circular(30),
                                ),
                                gradient: LinearGradient(
                                  begin: Alignment.topCenter,
                                  end: Alignment.bottomLeft,
                                  colors: [
                                    Colors.black.withOpacity(0.0), // top dark
                                    Colors.transparent, // middle clear
                                    Colors.black, // bottom dark
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                      // Back button
                      Positioned(
                        top: 60,
                        left: 20,
                        child: GestureDetector(
                          onTap: () => Navigator.pop(context),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              border: Border.all(
                                color: Color(0xFF161928).withOpacity(.3),
                                width: 5,
                              ),
                            ),
                            child: Container(
                              padding: EdgeInsets.all(8),
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.9),
                                shape: BoxShape.circle,
                              ),
                              child: const Icon(
                                Icons.arrow_back_ios_new,
                                color: Color(0xFF2C3E50),
                                size: 20,
                              ),
                            ),
                          ),
                        ),
                      ),
                      // Bookmark button
                      Positioned(
                        top: 60,
                        right: 20,
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(30),
                            border: Border.all(
                              color: Color(0xFF161928).withOpacity(.3),
                              width: 5,
                            ),
                          ),
                          child: Container(
                            padding: const EdgeInsets.all(8),
                            decoration: BoxDecoration(
                              color: Colors.white.withOpacity(0.9),
                              shape: BoxShape.circle,
                            ),
                            child: Image.asset(
                              AppImages.disLikeIcon,
                              height: 20,
                              color: Colors.black87,
                            ),
                          ),
                        ),
                      ),
                      // Action buttons
                      Positioned(
                        bottom: 20,
                        right: 20,
                        child: Column(
                          children: [
                            buildActionButton(Icons.photo_library_outlined),
                            const SizedBox(height: 10),
                            buildActionButton(Icons.threed_rotation_rounded),
                            const SizedBox(height: 10),
                            buildActionButton(Icons.store_outlined),
                          ],
                        ),
                      ),
                      // Title and price overlay
                      Positioned(
                        bottom: 20,
                        left: 20,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '$subtitle\n$title',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 28,
                                fontWeight: FontWeight.bold,
                                height: 1.2,
                                shadows: [
                                  Shadow(
                                    color: Colors.black45,
                                    offset: Offset(0, 2),
                                    blurRadius: 5,
                                  ),
                                ],
                              ),
                            ),
                            const SizedBox(height: 8),
                            Text(
                              '$price/month',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                                shadows: [
                                  Shadow(
                                    color: Colors.black45,
                                    offset: Offset(0, 2),
                                    blurRadius: 5,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  // Overview section
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Overview',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFFFF8C45),
                          ),
                        ),
                        const SizedBox(height: 15),
                        Row(
                          children: [
                            buildSpecItem(
                              Icons.bed_outlined,
                              '2 bedroom',
                              'King size',
                            ),
                            const SizedBox(width: 30),
                            buildSpecItem(
                              Icons.straighten_outlined,
                              '50 m²',
                              'Building area',
                            ),
                          ],
                        ),
                        const SizedBox(height: 20),
                        Text(
                          'The Kalibata City Apartment is located in the midst of the hustle and bustle of Jakarta, and is touted as one of the most popular residences in the area.',
                          style: TextStyle(
                            color: Colors.black87,
                            fontSize: 14,
                            height: 1.6,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          // Rent now button
          Padding(
            padding: const EdgeInsets.all(25),
            child: SizedBox(
              width: double.infinity,
              height: 60,
              child: Container(
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    begin: Alignment.topRight,
                    end: Alignment.bottomLeft,
                    colors: [
                      Color(0xFFF35904), // #f35904
                      Color(0xFFF79037), // #f79037
                      Color(0xFFf8963d), // #f79037
                    ],
                  ),
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.25),
                      blurRadius: 10,
                      offset: const Offset(0, 6),
                    ),
                  ],
                ),
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    shadowColor: Colors.transparent,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Text(
                        'Rent now',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(width: 10),
                      Icon(Icons.arrow_forward, color: Colors.white),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildActionButton(IconData icon) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
        border: Border.all(color: Color(0xFF161928).withOpacity(.4), width: 4),
      ),
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: const Color(0xFF2C3E50).withOpacity(0.8),
          borderRadius: BorderRadius.circular(12),
        ),
        child: Icon(icon, color: Colors.white, size: 20),
      ),
    );
  }

  Widget buildSpecItem(IconData icon, String title, String subtitle) {
    return Row(
      children: [
        Container(
          width: 44,
          height: 44,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              // bottom shadow (depth)
              BoxShadow(
                color: Colors.black.withOpacity(0.25),
                blurRadius: 8,
                offset: const Offset(3, 4),
              ),
              // top highlight (3D feel)
              BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 4,
                offset: const Offset(-2, -2),
              ),
            ],
          ),
          child: Center(
            child: Icon(icon, color: const Color(0xFFFF8C42), size: 24),
          ),
        ),

        const SizedBox(width: 10),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 15,
                color: Color(0xFF2C3E50),
              ),
            ),
            Text(
              subtitle,
              style: TextStyle(color: Colors.grey[600], fontSize: 12),
            ),
          ],
        ),
      ],
    );
  }
}

- Gradient-based header with search functionality

- Horizontal travel categories with selection state

- Reusable trip card widgets with image overlays

- Detailed property screen with hero-style image layout

- Clean spacing, shadows, and modern color palette

📌 Full source code is available on GitHub for easy reference and reuse.

GitHub Link

What’s New in Flutter 3.38 — Write Less, See More, Build Faster (Enhanced Overview)

noreply@blogger.com (Sunny Singh) — Wed, 26 Nov 2025 07:52:00 +0000

Introduction

Flutter 3.38 is here — and this quarter's release focuses on speeding up your workflow, smoother debugging, and writing less code with more power.
With 825 commits from 145 contributors (37 of whom are first-timers 🎉), this release delivers smarter tooling, refined framework behaviour, improved web development flows, and major platform-level improvements.

Let’s explore everything new — with polished explanations, fresh examples, and developer-friendly insights.

1. Dot Shorthands — Write Less, Do More

One of the headline features in Flutter 3.38 is the introduction of dot shorthands in Dart 3.10.
Dot shorthands let you skip writing long type names when Dart can infer them automatically.

✔ Before (old verbose way)

 Column(
   mainAxisAlignment: MainAxisAlignment.start,
   crossAxisAlignment: CrossAxisAlignment.center,
 );

✔ After (new shorthand magic ✨)

 Column(
   mainAxisAlignment: .start,
   crossAxisAlignment: .center,
 );

✔ Even for named constructors!

 Padding(
   padding: .all(12),
   child: Text('Hello'),
 );

Why it’s awesome:

Cleaner UI code
Less boilerplate
Faster prototyping
Helps make UI trees much more readable

Dot shorthands are on by default in Flutter 3.38 and Dart 3.10.

2. Web Improvements — Faster, Smarter, Team-Friendly

Flutter 3.38 finally nails some long-demanded web development upgrades.

2.1 Web Development Configuration File

You can now create a web_dev_config.yaml to define local dev settings like:

host
port
certificates
custom headers

Benefit:
All teammates can share the same local development setup without memorising CLI flags.

2.2 Proxy Support for Web Development

Flutter web now supports automatic proxy forwarding, e.g.:

Forward /api → backend server
Forward /auth → auth container

Helps when building Flutter apps that connect to dynamic or containerised backends.

2.3 Expanded Hot Reload Support on Web

Hot reload now works when running:

 flutter run -d web-server

And the best part:
➡️ It works across multiple open browsers simultaneously.

Perfect for multi-device testing.

3. Framework Enhancements — Smarter UI & Navigation

Flutter 3.38 refines many core classes, making the framework more predictable and powerful.

3.1 OverlayPortal Buffed

You can render overlay widgets anywhere up the widget tree using:

 OverlayPortal.overlayChildLayoutBuilder

Use cases:

App-wide notifications
Floating popups
Global tooltips
Breaking out of parent layout constraints

3.2 Predictive Back Gesture Enabled by Default (Android)

The modern Android-style back gesture is now the default.

Visual Preview:
When users swipe back, they see the home route animate behind the current route.

Flutter now matches native Android UX more accurately.

3.3 Desktop: Multi-Monitor Support (Windows)

Developers can now:

Get list of connected displays
Check resolution, physical size, refresh rate, etc.

Example:

 final displays = await DesktopDisplay.getAllDisplays();

Useful for:

Multi-window apps
Screen recording tools
Developer dashboards
Pro-level desktop utilities

3.4 More Resilient Widget Lifecycle

Errors inside methods like didUpdateWidget no longer break the entire element tree.
Result = fewer crashes, smoother dev experience.

4. Material & Cupertino Updates — Better UI Consistency

Flutter continues migrating UI states to the unified WidgetState API.

This means:

More predictable UI behaviour
Less duplicated state management
No breaking changes for existing apps

New Enhancements:

✔ `IconButton` now supports `statesController`

Control visual states programmatically:

 iconButtonStatesController.update(WidgetState.hovered, true);

Great for:

Custom hover styles
Interactive UIs
Gamified apps

✔ `Badge.count` gets `maxCount`

 Badge.count(
   count: 134,
   maxCount: 99, // displays 99+
 )

✔ `InkWell` adds `onLongPressUp`

Perfect for:

Drag-and-release gestures
Touch-and-hold menus

✔ Cupertino Improvements

CupertinoSlidingSegmentedControl gets isMomentary
CupertinoSheet adds authentic iOS-style stretch effect

5. Scrolling Improvements — Predictable Slivers

Big fixes for apps using complex scrolling structures, such as:

SliverMainAxisGroup
SliverCrossAxisGroup

Fixes include:

✔ Accurate hit-testing
✔ Correct overscroll behavior
✔ Fixes for pinned headers
✔ Reliable directional focus navigation
✔ New constructor: SliverGrid.list

Example:

 SliverGrid.list(
   children: [...],
 )

6. Accessibility Boosts — More Inclusive Apps

New & improved:

Turn on iOS accessibility by default
SliverSemantics for semantic annotations in scroll views
CupertinoExpansionTile now accessible
Autocomplete announces search results
Larger touch targets in TimePicker

Example using SliverSemantics:

 SliverSemantics(
   label: 'Top Stories',
   child: SliverToBoxAdapter(child: ...),
 )

7. iOS: Major Compatibility Updates

Flutter 3.38 fully supports:

iOS 26
macOS 26
Xcode 26

And removes the annoying behaviour of launching the Xcode app automatically.

New deployment uses:

 devicectl

Much faster and more stable.

UIScene Lifecycle Migration (Important!)

Apple now requires UIScene lifecycle for future apps.

Flutter 3.38 provides:

Manual migration guide
Automatic migration (experimental)

Enable it:

 flutter config --enable-uiscene-migration

8. Android — Critical Updates

8.1 16 KB Page Size Support

Required by Google Play from Nov 1, 2025.

Flutter updates NDK to r28 to ensure alignment.

Apps built without this will fail on high-RAM devices.

8.2 Major Memory Leak Fix

A long-standing Activity destruction memory leak (since 3.29.0) is now fixed.

8.3 Updated Android Dependency Stack

Flutter 3.38 works best with:

Java 17
Kotlin Plugin 2.2.20
AGP 8.11.1
Gradle 8.14

9. Engine Improvements — Smoother Rendering

✔ Faster performance overlay
✔ Vulkan & OpenGL ES stability improvements
✔ Renderer unification (CanvasKit + Skwasm)
✔ Thread merging cleaned up

10. DevTools & IDE Updates — Widget Previews Evolved

Widget Previews (introduced in 3.35) now get:

VSCode support
Android Studio support
Smoother UX
More stable preview rendering

Example preview annotation:

 @WidgetPreview()
 Widget myButton() => ElevatedButton(onPressed: () {}, child: Text('Tap'));

Final Thoughts

Flutter 3.38 is a developer productivity power-pack, delivering:

Shorter code with dot shorthands
Better web workflows
Smarter navigation & overlays
More polished Material/Cupertino widgets
Faster engine performance
Full iOS + Android future-proofing
Better accessibility & scrolling
Upgraded Widget Previews

It’s cleaner, faster, and more predictable—perfect for building modern apps across every platform.

How to Merge Images in Python: A Complete Guide for Beginners

noreply@blogger.com (Sunny Singh) — Thu, 27 Mar 2025 09:39:00 +0000

How to Merge Images in Python

Merging images is a crucial technique in image processing. It is often used to create collages, blend graphics, and enhance visuals. With its robust libraries like Pillow and OpenCV, Python provides seamless solutions for effortlessly merging images. In this comprehensive guide, we will explore different ways to merge images in Python with easy-to-follow code examples.

Why Merge Images in Python?

Merging images is widely used in:

Creating collages for social media posts and advertisements.
Stitching images for panoramic photography
Enhancing visual effects in graphic design
Combining datasets for machine learning models

With Python’s image processing libraries, you can merge images with precision, customize their alignment, and even blend them smoothly for professional results.

Method 1: Merging Images Using Pillow (PIL)

Pillow, an advanced version of the Python Imaging Library (PIL), is a simple yet powerful library for handling images.

Step 1: Install Pillow

Before getting started, install Pillow using pip:

pip install pillow

Step 2: Merge Images Horizontally or Vertically

Here’s how you can merge two images side by side or on top of each other:

from PIL import Image, ImageFile
 import numpy as np
 import os

 # Disable the decompression bomb check
 Image.MAX_IMAGE_PIXELS = None
 # Allow loading of truncated images
 ImageFile.LOAD_TRUNCATED_IMAGES = True

 def merge_images_seamless(image_paths, output_path, grid_size=(2, 2), scale_factor=None):

    if len(image_paths) != grid_size[0] * grid_size[1]:
        raise ValueError(f"Expected {grid_size[0] * grid_size[1]} images for a {grid_size[0]}x{grid_size[1]} grid, but got {len(image_paths)}")
    
    # Open all images
    print("Opening images...")
    images = []
    for img_path in image_paths:
        try:
            img = Image.open(img_path)
            # Convert to RGB to ensure consistent format
            if img.mode != 'RGB':
                img = img.convert('RGB')
            
            # Resize if scale factor is provided
            if scale_factor and scale_factor != 1.0:
                new_width = int(img.width * scale_factor)
                new_height = int(img.height * scale_factor)
                img = img.resize((new_width, new_height), Image.LANCZOS)
                print(f"Resized {img_path} to {new_width}x{new_height}")
            
            images.append(img)
            print(f"Successfully loaded {img_path} with size {img.width}x{img.height}")
        except Exception as e:
            print(f"Error opening {img_path}: {e}")
            # Create a placeholder
            placeholder = Image.new('RGB', (1000, 1000), color='gray')
            images.append(placeholder)
    
    # Find the dimensions for each row and column
    print("Stitching images...")
    rows = []
    for r in range(grid_size[0]):
        row_images = [images[r * grid_size[1] + c] for c in range(grid_size[1])]
        rows.append(row_images)
    
    # Memory-efficient approach: stitch one row at a time
    final_height = sum(max(img.height for img in row) for row in rows)
    final_width = max(sum(img.width for img in row) for row in rows)
    
    print(f"Creating final image with dimensions {final_width}x{final_height}")
    result = Image.new('RGB', (final_width, final_height))
    
    y_offset = 0
    for row in rows:
        row_height = max(img.height for img in row)
        x_offset = 0
        
        for img in row:
            result.paste(img, (x_offset, y_offset))
            x_offset += img.width
        
        y_offset += row_height
    
    print(f"Saving final image to {output_path}")
    result.save(output_path)
    print(f"Seamlessly merged image saved to {output_path}")

 # Example usage
 if __name__ == "__main__":
    # Replace these with your actual image paths
    images = [
        "/Users/apple/Documents/Flutter/high/1.png",
        "/Users/apple/Documents/Flutter/high/2.png",
        "/Users/apple/Documents/Flutter/high/3.png",
        "/Users/apple/Documents/Flutter/high/4.png"
    ]
    
    # Replace with your desired output path
    output_file = "flutterMarge.jpg"
    
    # Run the merge function with a scale factor to reduce memory usage
    # Use 0.5 for half size, 0.25 for quarter size, etc.
    merge_images_seamless(images, output_file, scale_factor=0.25)

How to Chunk Images Using Python & Compress to WebP for Faster Loading

noreply@blogger.com (Sunny Singh) — Wed, 26 Mar 2025 10:21:00 +0000

Chunk Images Using Python

Handling large images efficiently is essential for optimizing performance in web applications, machine learning, and data processing. Chunking images—dividing them into smaller sections—can help with faster loading times, parallel processing, and improved storage management.

In this guide, we’ll explore how to use Python to split images into chunks and convert them into the WebP format for better compression and faster web performance. Whether you're a developer looking to optimize your website's images or working on an image-processing project, this Python script will streamline the process effectively.

Image Chunking & WebP Conversion

This Python script helps in two major steps:

Divides an image into multiple chunks
Compresses each chunk into WebP format

Python Code for Image Optimization

from PIL import Image
import cv2
import numpy as np
import os
import concurrent.futures
from tqdm import tqdm

class ImageProcessor:
    def __init__(self):
        Image.MAX_IMAGE_PIXELS = None  # Disable pixel limit for Pillow
        
    def create_chunks(self, image_path, output_dir, chunks_h=2, chunks_v=2):
        """Step 1: Divide image into chunks"""
        print("Step 1: Dividing image into chunks...")
        os.makedirs(output_dir, exist_ok=True)
        
        image = Image.open(image_path)
        chunk_width = image.width // chunks_h
        chunk_height = image.height // chunks_v
        
        chunk_number = 1
        for i in range(chunks_v):
            for j in range(chunks_h):
                left = j * chunk_width
                top = i * chunk_height
                right = left + chunk_width
                bottom = top + chunk_height
                
                chunk = image.crop((left, top, right, bottom))
                chunk.save(f'{output_dir}/{chunk_number}.png', 'PNG')
                chunk_number += 1
        
        print(f"Image divided into {chunks_h * chunks_v} chunks.")
        return chunks_h * chunks_v
    
    def convert_to_webp(self, input_path, output_path, quality=35):
        """Convert single PNG to WebP"""
        try:
            with Image.open(input_path) as img:
                if img.mode in ('RGBA', 'RGB'):
                    output_path = output_path.replace('.png', '.webp')
                    img.save(output_path, 'WEBP',
                           quality=quality,
                           lossless=False,
                           method=6,
                           exact=True)
                    
                    original_size = os.path.getsize(input_path)
                    compressed_size = os.path.getsize(output_path)
                    ratio = (1 - compressed_size/original_size) * 100
                    
                    return True, ratio, f"{original_size/1024:.1f}KB -> {compressed_size/1024:.1f}KB"
                else:
                    return False, 0, "Unsupported image mode"
        except Exception as e:
            return False, 0, str(e)
    
    def compress_images(self, input_dir, output_dir, quality=35, batch_size=4):
        """Step 2: Compress images to WebP format"""
        print("\nStep 2: Compressing images to WebP...")
        os.makedirs(output_dir, exist_ok=True)
        
        png_files = [f for f in os.listdir(input_dir) if f.endswith('.png')]
        total_files = len(png_files)
        
        if total_files == 0:
            print("No PNG files found in the input directory")
            return
        
        successful = 0
        failed = 0
        total_saved = 0
        
        with concurrent.futures.ThreadPoolExecutor(max_workers=batch_size) as executor:
            futures = []
            
            for filename in png_files:
                input_path = os.path.join(input_dir, filename)
                output_path = os.path.join(output_dir, filename)
                
                future = executor.submit(self.convert_to_webp, input_path, output_path, quality)
                futures.append((future, filename))
            
            for future, filename in tqdm(futures, desc="Converting to WebP"):
                success, ratio, result = future.result()
                
                if success:
                    successful += 1
                    total_saved += ratio
                    tqdm.write(f"\u2713 {filename}: {result} ({ratio:.1f}% smaller)")
                else:
                    failed += 1
                    tqdm.write(f"\u2717 {filename}: Failed - {result}")
        
        print(f"\nSuccessfully converted: {successful} images")
        print(f"Failed: {failed} images")
        if successful > 0:
            print(f"Average space saved: {total_saved/successful:.1f}%")

 def main():
    # Configuration
    input_image = "your_image_path.jpg"  # Replace with your image path
    chunks_dir = "image_chunks"  # Directory for image chunks
    webp_dir = "compressed_images"  # Directory for final WebP images
    
    chunks_horizontal = 2
    chunks_vertical = 2
    webp_quality = 35
    batch_size = 4
    
    # Initialize processor
    processor = ImageProcessor()
    
    # Run pipeline
    total_chunks = processor.create_chunks(input_image, chunks_dir, 
                                         chunks_horizontal, chunks_vertical)
    processor.compress_images(chunks_dir, webp_dir, webp_quality, batch_size)

 if __name__ == "__main__":
    main()

How Does This Script Enhance?

Smaller image sizes improve website speed.
WebP format is widely supported and provides better compression.
Batch processing saves time for large image sets.
Reduces hosting costs by lowering bandwidth usage.

Flutter Connectivity Plus: Detect Internet Connection on Android and iOS with GetX – Complete Code Example and Beautiful UI

noreply@blogger.com (Sunny Singh) — Tue, 22 Oct 2024 07:27:00 +0000

The connectivity_plus package is a popular tool in Flutter for monitoring network connectivity status across platforms like Android and iOS. This post will provide an SEO-optimized guide to help you rank on Google, along with a complete Flutter code example using GetX for controller binding and view with a beautified UI.

What is `connectivity_plus`?

The connectivity_plus package allows developers to check the network status of a device in Flutter. It detects whether the user is connected to the internet via WiFi, mobile data, or offline.

Why Use `connectivity_plus` in Flutter?

In many applications, internet connectivity plays a critical role. Whether you are building an e-commerce app or a social media app, knowing the device's network status is important for managing online/offline operations and providing a smooth user experience.

Key benefits include:

Monitoring real-time connectivity changes.
Notifying users about network disconnection.
Helping apps adapt to connectivity conditions like switching between WiFi and mobile data.

Features of `connectivity_plus`

Cross-platform: Supports both Android and iOS.
Event-driven: Listens for changes in connectivity status.
Easy integration: Comes with a simple API for checking and listening to connectivity.

Installing `connectivity_plus` in Your Flutter Project

To use connectivity_plus, first, add the package to your pubspec.yaml file:

 dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^4.0.3  # Use the latest version

Then, run:

flutter pub get

Full Code Example: Controller Binding and View

In this example, we will use GetX for state management and controller binding to manage network connectivity.

Step 1: Setting up the GetX Controller

Create a file connectivity_controller.dart and define a GetX controller to handle connectivity status:

 import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:get/get.dart';

 class ConnectivityController extends GetxController {
   var connectionStatus = 0.obs; // 0 - Unknown, 1 - WiFi, 2 - Mobile, 3 - Offline

   final Connectivity _connectivity = Connectivity();

   @override
   void onInit() {
    super.onInit();
    _checkConnection();
    _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
   }

   Future _checkConnection() async {
    var connectivityResult = await _connectivity.checkConnectivity();
    _updateConnectionStatus(connectivityResult);
   }

   void _updateConnectionStatus(ConnectivityResult result) {
     switch (result) {
       case ConnectivityResult.wifi:
         connectionStatus.value = 1;
         break;
       case ConnectivityResult.mobile:
         connectionStatus.value = 2;
         break;
       case ConnectivityResult.none:
         connectionStatus.value = 3;
         break;
       default:
         connectionStatus.value = 0;
         break;
     }
   }
 }

Step 2: Creating the UI

Now, create the UI to display the connectivity status in main.dart.

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'connectivity_controller.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Connectivity Plus Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
       home: HomeScreen(),
     );
   }
 }

 class HomeScreen extends StatelessWidget {
  final ConnectivityController controller = Get.put(ConnectivityController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Status'),
      ),
      body: Center(
        child: Obx(() {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                _getConnectionIcon(controller.connectionStatus.value),
                size: 100,
                color: _getConnectionColor(controller.connectionStatus.value),
              ),
              SizedBox(height: 20),
              Text(
                _getConnectionText(controller.connectionStatus.value),
                style: TextStyle(fontSize: 24),
              ),
            ],
          );
        }),
      ),
    );
  }

  IconData _getConnectionIcon(int status) {
    switch (status) {
      case 1:
        return Icons.wifi;
      case 2:
        return Icons.signal_cellular_alt;
      case 3:
        return Icons.signal_wifi_off;
      default:
        return Icons.help_outline;
    }
  }

  Color _getConnectionColor(int status) {
    switch (status) {
      case 1:
        return Colors.green;
      case 2:
        return Colors.orange;
      case 3:
        return Colors.red;
      default:
        return Colors.grey;
    }
  }

  String _getConnectionText(int status) {
    switch (status) {
      case 1:
        return "Connected to WiFi";
      case 2:
        return "Using Mobile Data";
      case 3:
        return "No Internet Connection";
      default:
        return "Unknown Network Status";
     }
   }
 }

Beautified UI for Network Status

In the above UI:

Icons: Represent different connection states such as WiFi, mobile data, or no connection.
Colors: Different colors (green, orange, red) are used to highlight the current network status.
Dynamic Text: Text changes dynamically based on the connection status.

You can further enhance this UI by adding animations or better design elements such as custom fonts, shadow effects, or background gradients.

Conclusion

Using connectivity_plus in your Flutter application allows you to monitor network connectivity easily and efficiently. With the GetX package for state management, the implementation becomes seamless. By following this guide, you can quickly integrate connectivity monitoring into your app and provide users with real-time feedback on their network status.

What is GraphQL? A Comprehensive Guide with Flutter and GetX Example

noreply@blogger.com (Sunny Singh) — Mon, 21 Oct 2024 14:43:00 +0000

What is GraphQL? A Comprehensive Guide with Flutter and GetX Example

In the world of modern web and mobile application development, GraphQL has emerged as a powerful alternative to traditional REST APIs. Built by Facebook and released as an open-source project in 2015, GraphQL offers a flexible, efficient, and powerful way to interact with APIs.

This guide provides a detailed breakdown of GraphQL, including Mutations, Subscriptions, how it compares to REST APIs, and why developers prefer using it. We'll also cover setting up GraphQL with Flutter using GetX for state management, complete with working code.

What is GraphQL?

GraphQL is a query language for APIs and a runtime environment that executes these queries. It allows clients to specify exactly what data they need and nothing more, making data-fetching efficient and adaptable. Unlike REST, where each endpoint returns fixed data, GraphQL uses a single endpoint to fetch various resources.

Key Features of GraphQL

Precise Data Fetching: Clients ask for exactly the data they need, reducing both over-fetching and under-fetching issues common in REST.
Single Endpoint: A single endpoint is used to perform different actions (queries, mutations, subscriptions) rather than multiple endpoints.
Type-Safe Schema: GraphQL APIs use a type system to define the shape of your data, which enhances error detection and tooling support.
Real-Time Data: Through subscriptions, clients can receive real-time updates whenever data changes.

History of GraphQL

GraphQL was developed by Facebook in 2012 to address problems they encountered with mobile performance and REST APIs. It was officially open-sourced in 2015 and has been steadily gaining popularity in the development community. Major companies like GitHub, Shopify, and Twitter have adopted GraphQL to power their APIs.

How Does GraphQL Work?

Client Request: The client sends a query, mutation, or subscription request to the GraphQL server specifying the exact data required.
Server Resolves: The server processes this request based on the defined schema and executes the resolvers.
Data Response: The server returns only the requested data back to the client.

Why Use GraphQL?

Here are a few reasons why GraphQL has become the preferred choice for many developers:

Efficient Data Fetching: Unlike REST, where you often over-fetch or under-fetch data, GraphQL lets you fetch only the required data, making API requests efficient.
Single API Endpoint: Instead of multiple REST endpoints, you have a single endpoint to handle all requests, making the backend simpler.
Strong Type System: GraphQL uses a schema to define data types, helping developers catch errors early and improving overall robustness.
Real-Time Subscriptions: GraphQL supports real-time data updates with subscriptions, which is great for live updates in chat apps, stock data, etc.
Flexible Queries: Clients can request different sets of data using a single query by specifying exactly which fields they need.

GraphQL Operations: Queries, Mutations, and Subscriptions

Key Concepts in GraphQL:

Query: Used to fetch data from the server.
Mutation: Allows modifying server-side data (e.g., creating, updating, or deleting).
Subscription: Enables real-time updates, letting clients listen for specific events.

Query:
- Fetches data (similar to a GET request in REST).
- Exapmle

 query {
  users {
     id
     name
     email
   }
 }

This query fetches all users and their respective id, name and email

Mutation:

Used to modify server-side data (similar to POST, PUT, DELETE in REST).
Example:

 mutation {
  createUser(name: "John Doe", email: "john@example.com") {
     id
     name
     email
   }
 }

This mutation creates a new user with the provided name and email

Subscription:

Enables real-time updates, notifying the client whenever a specific event happens.
Example

 subscription {
  userAdded {
     id
     name
   }
 }

This subscription notifies the client whenever a new user is added, returning the user’s id and name

GraphQL vs. REST: A Detailed Comparison

GraphQL and REST are often compared due to their widespread use in API development. Here's how they differ:

Feature	GraphQL	REST API
Data Fetching	Flexible, returns only required data	Fixed structure, over-fetching or under-fetching issues
API Structure	Single endpoint	Multiple endpoints for different resources
Versioning	No need for API versioning	Requires versioning (e.g., /v1, /v2)
Real-time Capabilities	Built-in subscriptions	Needs additional tooling (e.g., WebSockets)
Learning Curve	Steeper (due to schema, queries)	Simpler, widely known concepts (HTTP methods)
Tooling	Strong schema-based tooling support	Limited tooling based on JSON structure

Building a Flutter App with GraphQL and GetX

In this section, we'll walk through creating a Flutter application that integrates GraphQL using GetX for state management. The app will include fetching user data, creating users, and handling real-time updates with GraphQL subscriptions.

Step 1: Add Dependencies

Update your pubspec.yaml with the following dependencies:

  dependencies:
  flutter:
    sdk: flutter
  get:
  graphql_flutter:

Step 2: Setup the Main File

Initialize the GraphQL client in main.dart and configure the app to use GetX with GraphQLProvider.

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';

 void main() async {
  await initHiveForFlutter();
  runApp(MyApp());
 }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final HttpLink httpLink = HttpLink(
      'https://your-graphql-endpoint',
    );

    ValueNotifier client = ValueNotifier(
      GraphQLClient(
        link: httpLink,
        cache: GraphQLCache(store: HiveStore()),
      ),
    );

    return GraphQLProvider(
      client: client,
      child: GetMaterialApp(
        home: HomeScreen(),
       ),
     );
   }
 }

Step 3: Create a HomeController Using GetX

This controller manages GraphQL queries, mutations, and state updates.

 import 'package:get/get.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';

 class HomeController extends GetxController {
  // Observable list to store users
  var users = >[].obs;

  // GraphQL query to fetch users
  final String fetchUsersQuery = """
    query {
      users {
        id
        name
        email
      }
    }
  """;

  // Function to fetch users from the server
  void fetchUsers(GraphQLClient client) async {
    final QueryOptions options = QueryOptions(
      document: gql(fetchUsersQuery),
    );

    // Execute the query
    final result = await client.query(options);
    
    // Check for errors
    if (result.hasException) {
      print(result.exception.toString());
      return;
    }
    
    // Update the observable list with fetched users
    users.value = List>.from(result.data!['users']);
  }

  // GraphQL mutation to create a new user
  final String createUserMutation = """
    mutation(\$name: String!, \$email: String!) {
      createUser(name: \$name, email: \$email) {
        id
        name
        email
      }
    }
  """;

  // Function to create a new user
  void createUser(GraphQLClient client, String name, String email) async {
    final MutationOptions options = MutationOptions(
      document: gql(createUserMutation),
      variables: {
        'name': name,
        'email': email,
      },
    );

    // Execute the mutation
    final result = await client.mutate(options);

    // Check for errors
    if (result.hasException) {
      print(result.exception.toString());
      return;
    }

    // Add the newly created user to the observable list
    users.add(result.data!['createUser']);
   }
 }Step 4: Create the HomeScreen UI
The `HomeScreen` widget displays a list of users and allows you to add new users.

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'home_controller.dart';

 class HomeScreen extends StatelessWidget {
  final HomeController homeController = Get.put(HomeController());
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final GraphQLClient client = GraphQLProvider.of(context).value;

    return Scaffold(
      appBar: AppBar(title: Text('GraphQL + Flutter + GetX')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () => homeController.fetchUsers(client),
              child: Text('Fetch Users'),
            ),
            SizedBox(height: 16),
            Expanded(
              child: Obx(() {
                // Display users or a message if none are found
                if (homeController.users.isEmpty) {
                  return Center(child: Text('No users found.'));
                }
                return ListView.builder(
                  itemCount: homeController.users.length,
                  itemBuilder: (context, index) {
                    final user = homeController.users[index];
                    return ListTile(
                      title: Text(user['name']),
                      subtitle: Text(user['email']),
                    );
                  },
                );
              }),
            ),
            TextField(
              controller: nameController,
              decoration: InputDecoration(hintText: 'Enter Name'),
            ),
            TextField(
              controller: emailController,
              decoration: InputDecoration(hintText: 'Enter Email'),
            ),
            SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                // Create a new user with the input data
                homeController.createUser(client, nameController.text, emailController.text);
                // Clear the input fields
                nameController.clear();
                emailController.clear();
              },
              child: Text('Add User'),
             ),
           ],
         ),
       ),
     );
   }
 }

Conclusion

Integrating GraphQL with Flutter and GetX allows for powerful, real-time apps with minimal data-fetching overhead. This tutorial covered the basics of GraphQL operations and provided a working example in Flutter, making it easier to understand the flexibility and performance benefits of using GraphQL in your apps.

By using GraphQL's query language and real-time subscriptions, you can build scalable applications that provide optimal performance and user experience. For modern app development, especially when working with dynamic data, GraphQL is an excellent choice to explore.

How to Set Up Flutter Local Notifications (Android & iOS) with GetX | Full Code Example and Beautiful UI

noreply@blogger.com (Sunny Singh) — Mon, 21 Oct 2024 05:58:00 +0000

How to Use `flutter_local_notifications` in Flutter with GetX: Full Code Example with Beautiful UI

The flutter_local_notifications package enables you to display local notifications in your Flutter app. Combined with GetX for state management, you can efficiently schedule and manage notifications with real-time updates.

Prerequisites

Ensure the following dependencies are added to your pubspec.yaml file:

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  flutter_local_notifications: ^12.0.4

Run flutter pub get to install the dependencies.

Step 1: Setting up the Notification Controller

We'll create a controller that manages notification scheduling and real-time state updates using GetX.

`notification_controller.dart`

 import 'package:get/get.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';

 class NotificationController extends GetxController {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = 
      FlutterLocalNotificationsPlugin();
  
  @override
  void onInit() {
    super.onInit();
    initializeNotifications();
  }

  void initializeNotifications() async {
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    final InitializationSettings initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
    );

    await flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  void showNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
      'your_channel_id',
      'your_channel_name',
      importance: Importance.high,
      priority: Priority.high,
    );

    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);

    await flutterLocalNotificationsPlugin.show(
      0,
      'Hello!',
      'This is a local notification.',
      platformChannelSpecifics,
     );
   }
 }

In this controller:

initializeNotifications: Initializes the local notifications system.
showNotification: Schedules and displays a basic notification.

Step 2: Setting up the View with Beautiful UI

We’ll now create the view where users can trigger the notifications. The UI will be designed to look modern and attractive.

`notification_view.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'notification_controller.dart';

 class NotificationView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Local Notifications'),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // App logo
            Image.asset('assets/notification.png', height: 200),
            const SizedBox(height: 20),
            
            // Notification button
            ElevatedButton(
              onPressed: controller.showNotification,
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                primary: Colors.teal, // button color
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
              child: const Text(
                'Show Notification',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(height: 20),

            // Subtitle
            const Text(
              'Tap the button to show a notification!',
              style: TextStyle(fontSize: 16, color: Colors.grey),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

AppBar: Displays a styled app bar with a centered title.
Image.asset: Adds an image as a visual element (e.g., a logo).
ElevatedButton: A styled button to trigger notifications.
Text: A simple subtitle to guide the user.

Step 3: Setting up the Binding

The binding will inject the NotificationController into the view.

`notification_binding.dart`

 import 'package:get/get.dart';
 import 'notification_controller.dart';

 class NotificationBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => NotificationController());
   }
 }

Step 4: Setting up the Main App

Finally, configure the routing and binding in your main.dart.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'notification_view.dart';
 import 'notification_binding.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => NotificationView(),
          binding: NotificationBinding(),
        ),
      ],
      title: 'Local Notifications Example',
      theme: ThemeData(
        primarySwatch: Colors.teal,
       ),
     );
   }
 }

Step 6: Android and iOS Permissions

Android

In your AndroidManifest.xml, add the following permissions:

 <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

Also, ensure that you add the necessary notification channel in the Android setup (if required).

iOS

For iOS, you need to request notification permissions. Add this to your Info.plist:

 <key>UIBackgroundModes</key>
 <array>
  <string>fetch</string>
  <string>remote-notification</string>
 </array>

In this tutorial, we implemented local notifications in Flutter for both Android and iOS using the flutter_local_notifications package with GetX for state management. The example provided includes a fully functional code setup with a beautified UI, ensuring the notification feature in your Flutter app is well-organized and visually appealing.

With this guide, you now have a complete solution for managing local notifications across both platforms using Flutter and GetX. Let me know if you need further assistance or customizations!

Flutter OTP Verification with Pin Code Field and Resend Button Using GetX – Complete Example with Timer and Validation.

noreply@blogger.com (Sunny Singh) — Sat, 19 Oct 2024 16:51:00 +0000

How to Build an OTP Verification Screen in Flutter with GetX: Complete Guide with Beautified UI

Creating an OTP (One-Time Password) verification screen is a crucial part of many apps for security purposes. In this post, we’ll guide you through setting up a modern OTP verification screen in Flutter using GetX for state management. We'll also provide a beautiful UI that resembles the design shared.

Step 1: Add Dependencies

Add the necessary dependencies in your pubspec.yaml file:

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  pin_code_fields: ^7.4.0

Run flutter pub get to fetch the packages.

Step 2: Create the OTP Controller with GetX

We’ll create a controller that manages the timer, OTP input, and validation.

`otp_controller.dart`

 import 'package:get/get.dart';
 import 'package:flutter/material.dart';
 import 'dart:async';

 class OTPController extends GetxController {
  var isCodeExpired = false.obs;
  var otp = ''.obs;
  var remainingTime = 60.obs; // 1 minute in seconds
  Timer? timer;
  TextEditingController otpController = TextEditingController(); // Create a TextEditingController

  @override
  void onInit() {
    startTimer();
    super.onInit();
  }

  void startTimer() {
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (remainingTime.value > 0) {
        remainingTime.value--;
      } else {
        isCodeExpired.value = true;
        timer.cancel();
      }
    });
  }

  void resendCode() {
    remainingTime.value = 60; // Reset timer to 60 seconds
    isCodeExpired.value = false;
    otp.value = ''; // Clear the OTP field in the controller
    otpController.clear(); // Clear the text fields in PinCodeTextField
    startTimer(); // Restart the timer
    update(); // Notify UI to update
  }

  void onOTPComplete(String value) {
    otp.value = value;
  }

  @override
  void onClose() {
    timer?.cancel();
    otpController.dispose(); // Dispose of the controller
    super.onClose();
   }
 }

Step 3: Create the Beautified OTP Verification UI

We'll design the UI similar to the one you shared with a countdown timer, input fields for the OTP, and a "Resend Code" option.

`otp_view.dart`

 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:get/get.dart';
 import 'package:getx_tutorials/widgets/custom_button/custom_button.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:pin_code_fields/pin_code_fields.dart';
 import 'package:sizer/sizer.dart';
 import '../widgets/app_color/app_color.dart';
 import '../widgets/app_image/app_image.dart';
 import 'otp_controller.dart';

 class OtpVerificationScreen extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SvgPicture.asset(
              AppImages.scanIcon,
              height: 65.0, // Adjust the size of the icon if necessary
              width: 65.0,
            ), // Add your logo here
            const SizedBox(height: 20),
            Text(
              'OTP Verification',
              style: GoogleFonts.poppins(
                  fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            Text(
              'We have sent an OTP on given number +91 2224 555 333',
              textAlign: TextAlign.center,
              style: GoogleFonts.poppins(fontSize: 16, color: Colors.grey),
            ),
            const SizedBox(height: 20),
            Obx(() {
              return Text(
                controller.isCodeExpired.value
                    ? "Your otp has expired please resend"
                    : "00:${controller.remainingTime.value.toString().padLeft(2, '0')}",
                style: GoogleFonts.poppins(
                  color: controller.isCodeExpired.value
                      ? AppColors.appColor
                      : AppColors.appColor,
                  fontSize: 18,
                ),
              );
            }),
            SizedBox(height: 4.h),
            PinCodeTextField(
              appContext: context,
              length: 4,
              onChanged: (value) {
                controller.update();
              },
              onCompleted: controller.onOTPComplete,
              controller: controller.otpController,
              autoDismissKeyboard: true,
              enablePinAutofill: true,
              pinTheme: PinTheme(
                shape: PinCodeFieldShape.box,
                borderRadius: BorderRadius.circular(15),
                fieldHeight: 75,
                fieldWidth: 75,
                activeColor: AppColors.appColor,
                activeFillColor: AppColors.appbarColor,
                selectedColor: AppColors.appColor,
                selectedFillColor: AppColors.btnColor,
                inactiveColor: Colors.grey,
              ),
            ),
            const SizedBox(height: 20),
            const SizedBox(height: 20),
            Obx(
              () => CustomButton(
                onPressed: controller.resendCode,
                backgroundColor: controller.otp.value.length == 4
                    ? AppColors.appColor
                    : controller.isCodeExpired.value
                        ? AppColors.appColor
                        : AppColors.btnColor,
                text:
                    controller.isCodeExpired.value ? "Send Code Again" : 'Next',
                image: AppImages.rightArrow,
                imageColor: controller.isCodeExpired.value
                    ? AppColors.white
                    : controller.otp.value.length == 4
                        ? AppColors.whiteColor
                        : AppColors.optionIconColor,
                color: controller.isCodeExpired.value
                    ? AppColors.white
                    : controller.otp.value.length == 4
                        ? AppColors.whiteColor
                        : AppColors.optionIconColor,
               ),
             )
           ],
         ),
       ),
     );
   }
 }

Step 4: Binding the Controller

Bind the OTPController to the view using GetX bindings.

`otp_binding.dart`

 import 'package:get/get.dart';
 import 'otp_controller.dart';

 class OtpVerificationBindings extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => OTPController());
   }
 }

Step 5: Main Application Setup

In your main.dart, configure the routes and bindings using GetX.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get_navigation/src/root/get_material_app.dart';
 import 'package:getx_tutorials/widgets/app_color/app_color.dart';
 import 'package:getx_tutorials/widgets/app_routes/app_routes.dart';
 import 'package:responsive_framework/responsive_wrapper.dart';
 import 'package:responsive_framework/utils/scroll_behavior.dart';
 import 'package:sizer/sizer.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    Map color = {
      50: const Color(0xFF7DEF83),
      100: const Color(0xFF7DEF83),
      200: const Color(0xFF7DEF83),
      300: const Color(0xFF7DEF83),
      400: const Color(0xFF7DEF83),
      500: const Color(0xFF7DEF83),
      600: const Color(0xFF7DEF83),
      700: const Color(0xFF7DEF83),
      800: const Color(0xFF7DEF83),
      900: const Color(0xFF7DEF83),
    };
    return Sizer(
      builder: (context, orientation, deviceType) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'EV Assert',
          theme: ThemeData(
            primarySwatch: MaterialColor(0xFFA4573B, color),
            splashColor: AppColors.appColor,
            highlightColor: AppColors.appColor,
          ),
          // home:  OnboardingScreen(),
          builder: (context, child) => ResponsiveWrapper.builder(
              BouncingScrollWrapper.builder(context, child!),
              maxWidth: 1400,
              minWidth: 450,
              defaultScale: true,
              breakpoints: [
                const ResponsiveBreakpoint.resize(450, name: MOBILE),
                const ResponsiveBreakpoint.autoScale(800, name: TABLET),
                const ResponsiveBreakpoint.autoScale(1000, name: TABLET),
                const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
                const ResponsiveBreakpoint.autoScale(2460, name: "4K"),
              ],
              background: Container(color: const Color(0xFFF5F5F5))),
          // initialBinding: BindingsBuilder(() {
          //   printAction("Data coming here");
          // }),
          initialRoute: AppRoutes.otpScreen,
          getPages: AppRoutes.pages,
         );
       },
     );
 
   }
 }

This complete example demonstrates how to implement a functional and beautiful OTP verification screen in Flutter using GetX. The interface includes features like a countdown timer, OTP input field, and the ability to resend the code if it expires.

By following this guide, you can easily integrate a professional OTP verification system into your Flutter app with a modern and clean UI.

How to Use Cached Network Image in Flutter with GetX.

noreply@blogger.com (Sunny Singh) — Fri, 18 Oct 2024 05:07:00 +0000

Using `cached_network_image` in Flutter with GetX: Optimize Image Loading with Caching

The cached_network_image package allows Flutter apps to efficiently load and cache images from the web. In this tutorial, we’ll integrate it with GetX for state management to streamline image loading and cache control.

Prerequisites

Flutter SDK: Ensure that you have Flutter installed.
GetX Package: We’ll use the get package for state management.
cached_network_image Package: Add this to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  cached_network_image: ^3.2.1

Run flutter pub get to install the dependencies.

Step 1: Creating the Image Controller

We’ll set up a ImageController to handle image URL states using GetX.

`image_controller.dart`

 import 'package:get/get.dart';
 class ImageController extends GetxController {
  // This holds the URL of the image
  var imageUrl = 'https://via.placeholder.com/150'.obs;

  // Method to change the image URL
  void changeImageUrl(String newUrl) {
    imageUrl.value = newUrl;
   }
 }

In this controller:

imageUrl: Tracks the image URL as an observable variable.
changeImageUrl: Allows changing the image URL dynamically.

Step 2: Setting up the View

The view will display the cached image and allow the user to change the image URL using a button or text input.

`image_view.dart`

 import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:get/get.dart';
 import 'image_controller.dart';

 class ImageView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cached Network Image Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Image displayed using CachedNetworkImage
            Obx(() {
              return CachedNetworkImage(
                imageUrl: controller.imageUrl.value,
                placeholder: (context, url) => const CircularProgressIndicator(),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              );
            }),
            const SizedBox(height: 20),
            // Button to change the image URL
            ElevatedButton(
              onPressed: () {
                // Change to another image URL
                controller.changeImageUrl('https://via.placeholder.com/300');
              },
              child: const Text('Load New Image'),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

Obx: Watches the image URL and updates the image whenever it changes.
CachedNetworkImage: Displays the image and caches it.
ElevatedButton: Allows users to load a new image by changing the URL in the controller.

Step 3: Setting up the Binding

The binding class ensures the ImageController is injected into the view.

`image_binding.dart`

 import 'package:get/get.dart';
i mport 'image_controller.dart';

class ImageBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => ImageController());
   }
 }

Step 4: Running the App

Finally, configure the routing and binding in your main.dart.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_view.dart';
 import 'image_binding.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => ImageView(),
          binding: ImageBinding(),
        ),
      ],
      title: 'Cached Network Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
     );
   }
 }

Wrapping Up

In this guide, we’ve demonstrated:

Loading images efficiently using cached_network_image.
State management with GetX, allowing the dynamic loading and caching of images.
Using GetX Bindings to efficiently manage controller dependencies.

By following this tutorial, you now have a complete setup for using cached_network_image with GetX in Flutter. You can further extend this by loading multiple images, managing error states, and customizing the placeholders and error widgets.

Flutter Google Fonts Tutorial with GetX | Dynamic Font Selection with Full Code

noreply@blogger.com (Sunny Singh) — Thu, 17 Oct 2024 13:25:00 +0000

Adding Custom Fonts in Flutter Using `google_fonts` and GetX: A Step-by-Step Guide

The google_fonts package allows you to use a wide variety of fonts from Google Fonts in your Flutter application. In this tutorial, we’ll integrate google_fonts with GetX for easy state management, creating a responsive and flexible app layout.

Prerequisites

Flutter SDK: Ensure you have Flutter installed.
GetX Package: We’ll use the get package for state management.
google_fonts Package: Add this to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  google_fonts: ^3.0.1

Run flutter pub get to install the dependencies.

Step 1: Setting up the Controller

We’ll create a FontController to manage the font style selections using GetX.

`font_controller.dart`

 import 'package:get/get.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:flutter/material.dart';

 class FontController extends GetxController {
  // Set default font to Roboto
  var currentFont = GoogleFonts.roboto().fontFamily.obs;

  void changeFont(String fontName) {
    currentFont.value = GoogleFonts.getFont(fontName).fontFamily;
   }
 }

In this controller:

currentFont: Tracks the selected font.
changeFont: Changes the font style based on the provided font name.

Step 2: Setting up the View

The view will contain a dropdown menu to select a font and apply it to a text widget in real-time.

`font_view.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'font_controller.dart';

 class FontView extends GetView {
  final List fonts = ['Roboto', 'Lobster', 'Oswald', 'Pacifico', 'Montserrat'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Fonts Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() {
              return Text(
                "Flutter Google Fonts with GetX",
                style: TextStyle(fontFamily: controller.currentFont.value, fontSize: 24),
              );
            }),
            const SizedBox(height: 20),
            DropdownButton(
              value: controller.currentFont.value,
              onChanged: (String? newFont) {
                if (newFont != null) {
                  controller.changeFont(newFont);
                }
              },
              items: fonts.map>((String font) {
                return DropdownMenuItem(
                  value: GoogleFonts.getFont(font).fontFamily,
                  child: Text(font),
                );
              }).toList(),
              hint: const Text('Select a Font'),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

Obx Widget: Displays text with the current font selected in currentFont.
DropdownButton: Lists font options, allowing users to change the font in real time.

Step 3: Setting up the Binding

To inject FontController into the view, we’ll create a binding.

`font_binding.dart`

 import 'package:get/get.dart';
 import 'font_controller.dart';

 class FontBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => FontController());
   }
 }

This ensures the FontController is initialized only when needed, optimizing resources.

Step 4: Running the App

Finally, update main.dart to configure the binding and routing.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'font_view.dart';
 import 'font_binding.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => FontView(),
          binding: FontBinding(),
        ),
      ],
      title: 'Google Fonts Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
     );
   }
 }

Wrapping Up

In this guide, we covered:

Using google_fonts to style text dynamically.
GetX for state management to bind a custom font controller.
Organized MVC structure with bindings, ensuring efficient and modular code.

Now, you have a complete example of using google_fonts with GetX in Flutter to change and apply different fonts to text widgets.

How to Use image picker in Flutter with GetX | Capture and Select Images Easily

noreply@blogger.com (Sunny Singh) — Thu, 17 Oct 2024 05:09:00 +0000

Capture and Select Images in Flutter Using `image_picker` with GetX Controller Binding

The image_picker package is a great solution for allowing users to capture photos or choose images from their gallery in a Flutter app. In this guide, we’ll use image_picker in combination with GetX for state management to create an organized and responsive application.

Prerequisites

Flutter SDK: Ensure Flutter is installed.
GetX Package: Install get for state management.
image_picker: Add the package to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  image_picker: ^0.8.7+3

Run flutter pub get to install the packages.

Step 1: Setting up the Controller

We’ll create an ImagePickerController to handle picking images from the camera or gallery.

`image_picker_controller.dart`

 import 'package:get/get.dart';
 import 'package:image_picker/image_picker.dart';
 import 'dart:io';

 class ImagePickerController extends GetxController {
  final ImagePicker _picker = ImagePicker();
  var selectedImage = Rx(null);

  Future pickImageFromGallery() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      selectedImage.value = File(pickedFile.path);
    }
  }

  Future pickImageFromCamera() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.camera);
    if (pickedFile != null) {
      selectedImage.value = File(pickedFile.path);
    }
  }

  void clearImage() {
    selectedImage.value = null;
   }
 }

In this controller:

pickImageFromGallery: Picks an image from the gallery.
pickImageFromCamera: Captures an image using the camera.
clearImage: Resets the selected image.

Step 2: Setting up the View

The view will contain buttons to open the gallery or camera and display the selected image.

`image_picker_view.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_picker_controller.dart';

 class ImagePickerView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() {
              return controller.selectedImage.value == null
                  ? const Text("No image selected")
                  : Image.file(controller.selectedImage.value!);
            }),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                controller.pickImageFromGallery();
              },
              child: const Text("Pick Image from Gallery"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                controller.pickImageFromCamera();
              },
              child: const Text("Take Photo with Camera"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                controller.clearImage();
              },
              child: const Text("Clear Image"),
             ),
           ],
         ),
       ),
     );
   }
 }

In this view:

Obx Widget: Displays the image if it’s selected; otherwise, shows a default message.
Buttons: Allow users to pick an image from the gallery, take a photo, or clear the selected image.

Step 3: Setting up the Binding

To inject ImagePickerController into the view, we’ll create a binding.

`image_picker_binding.dart`

 import 'package:get/get.dart';
 import 'image_picker_controller.dart';

 class ImagePickerBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => ImagePickerController());
   }
 }

The binding ensures that ImagePickerController is initialized only when needed, optimizing resource usage.

Step 4: Running the App

Finally, update main.dart to configure the binding and routing.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'image_picker_view.dart';
 import 'image_picker_binding.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => ImagePickerView(),
          binding: ImagePickerBinding(),
        ),
      ],
      title: 'Image Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
     );
   }
 }

Wrapping Up

In this tutorial, we covered:

Using the image_picker package to select images from the gallery or camera.
GetX for state management with controller binding.
A complete MVC structure, making your Flutter app well-organized and efficient.

Now, you have a fully functioning image picker feature in your Flutter app using image_picker and GetX for clean and maintainable code.

How to Use url launcher in Flutter with GetX: Complete Guide and Code Example

noreply@blogger.com (Sunny Singh) — Tue, 15 Oct 2024 11:36:00 +0000

Open URLs in Flutter Using `url_launcher` with GetX Controller Binding

The url_launcher package is essential for Flutter developers who need to open links, dial phone numbers, send SMS, or compose emails from their apps. This guide will walk you through using url_launcher with GetX to create a clean and structured implementation.

Prerequisites

Flutter SDK: Make sure Flutter is installed.
GetX Package: Install get for state management.
url_launcher: Add the package to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  url_launcher: ^6.1.10

Run flutter pub get to install the packages.

Step 1: Setting up the Controller

We'll create a UrlController to handle launching URLs using the url_launcher package.

`url_controller.dart`

 import 'package:get/get.dart';
 import 'package:url_launcher/url_launcher.dart';

class UrlController extends GetxController {
  // Method to open a URL
  Future launchUrl(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  // Method to dial a phone number
  Future dialNumber(String phoneNumber) async {
    final url = 'tel:$phoneNumber';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not dial $phoneNumber';
    }
  }

  // Method to send SMS
  Future sendSms(String phoneNumber) async {
    final url = 'sms:$phoneNumber';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not send SMS to $phoneNumber';
    }
  }

  // Method to compose email
  Future composeEmail(String email) async {
    final url = 'mailto:$email';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not compose email to $email';
     }
   }
 }

In this controller:

launchUrl: Opens a URL in the default browser.
dialNumber: Dials a phone number using the phone's dialer.
sendSms: Opens the SMS app with the specified number.
composeEmail: Opens the email client with a recipient pre-filled.

Step 2: Setting up the View

The view will allow users to input various types of data and trigger different actions by calling the appropriate controller methods.

`url_view.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'url_controller.dart';

 class UrlView extends GetView {
  final TextEditingController urlController = TextEditingController();
  final TextEditingController phoneController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('URL Launcher Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: urlController,
              decoration: InputDecoration(labelText: 'Enter URL'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                controller.launchUrl(urlController.text);
              },
              child: const Text("Open URL"),
            ),
            const SizedBox(height: 20),
            TextField(
              controller: phoneController,
              decoration: InputDecoration(labelText: 'Enter Phone Number'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                controller.dialNumber(phoneController.text);
              },
              child: const Text("Dial Phone Number"),
            ),
            const SizedBox(height: 20),
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Enter Email Address'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                controller.composeEmail(emailController.text);
              },
              child: const Text("Compose Email"),
            ),
          ],
        ),
      ),
     );
   }
 }

In this view:

TextFields: Allow users to enter a URL, phone number, or email address.
Buttons: Trigger the appropriate action using the UrlController methods.

Step 3: Setting up the Binding

To inject UrlController into the view, we’ll create a binding.

`url_binding.dart`

 import 'package:get/get.dart';
 import 'url_controller.dart';

 class UrlBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => UrlController());
   }
 }

This binding ensures the UrlController is created when needed, keeping the app memory-efficient.

Step 4: Running the App

Finally, update main.dart to configure the binding and routing.

`main.dart`

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'url_view.dart';
 import 'url_binding.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => UrlView(),
          binding: UrlBinding(),
        ),
      ],
      title: 'URL Launcher Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
   }
 }

Wrapping Up

This code demonstrates how to:

Open URLs, dial phone numbers, send SMS, and compose emails using url_launcher.
Use GetX for controller binding, creating a clean and scalable architecture.
Handle various launch actions from a single view with minimal code.

The combination of url_launcher and GetX provides a robust and efficient approach to managing URL actions in a Flutter app. Get started today and give your users a more dynamic experience!

Flutter shared preferences Tutorial: Save and Retrieve Data with GetX (Full Code)

noreply@blogger.com (Sunny Singh) — Tue, 15 Oct 2024 07:47:00 +0000

How to Use `shared_preferences` in Flutter with GetX: Save & Retrieve Data Easily

The shared_preferences package is a popular choice for Flutter developers to store and retrieve small amounts of data. This guide will show you how to use shared_preferences with the GetX package to manage state in a Flutter app, following a complete MVC structure.

Why Use `shared_preferences` in Flutter?

The shared_preferences package allows you to:

Store simple data such as strings, integers, booleans, and lists.
Save data persistently across app launches.
Quickly retrieve values with a straightforward API.

Prerequisites

Flutter SDK: Ensure Flutter is installed.
GetX: Install the get package for state management.
shared_preferences: Add the package to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  shared_preferences: ^2.0.15

Run flutter pub get to install the dependencies.

Step 1: Setting up the Controller

We'll create a PreferencesController to handle saving and retrieving values from shared_preferences.

`preferences_controller.dart`

import 'package:get/get.dart';
import 'package:shared_preferences/shared_preferences.dart';

class PreferencesController extends GetxController {
  // Observables
  var username = ''.obs;
  var isLoggedIn = false.obs;

  // Method to save username
  Future saveUsername(String name) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('username', name);
    username.value = name;
  }

  // Method to get username
  Future getUsername() async {
    final prefs = await SharedPreferences.getInstance();
    username.value = prefs.getString('username') ?? '';
  }

  // Method to save login status
  Future saveLoginStatus(bool status) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isLoggedIn', status);
    isLoggedIn.value = status;
  }

  // Method to get login status
  Future getLoginStatus() async {
    final prefs = await SharedPreferences.getInstance();
    isLoggedIn.value = prefs.getBool('isLoggedIn') ?? false;
  }

  @override
  void onInit() {
    super.onInit();
    getUsername();
    getLoginStatus();
   }
 }

In this controller:

Observables: username and isLoggedIn are observable variables.
Save & Retrieve Methods: Methods for saving and retrieving values in shared_preferences.
onInit: Initializes data retrieval when the controller is loaded.

Step 2: Setting up the View

The view will interact with the controller to display and update saved preferences. We’ll use GetView<PreferencesController> for a clean setup.

`preferences_view.dart`

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'preferences_controller.dart';

class PreferencesView extends GetView {
  final TextEditingController nameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shared Preferences Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Obx(() => Text(
                  'Welcome, ${controller.username.value}',
                  style: const TextStyle(fontSize: 20),
                )),
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: 'Enter Username'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                controller.saveUsername(nameController.text);
              },
              child: const Text("Save Username"),
            ),
            const SizedBox(height: 20),
            Obx(() => SwitchListTile(
                  title: const Text('Logged In'),
                  value: controller.isLoggedIn.value,
                  onChanged: (value) {
                    controller.saveLoginStatus(value);
                  },
                )),
           ],
         ),
       ),
     );
   }
 }

In this view:

Obx Widgets: Reactive widgets to display the username and isLoggedIn states.
TextField: Allows input for the username.
Button: Saves the entered username.
SwitchListTile: Toggles the login status and saves it.

Step 3: Setting up the Binding

To inject PreferencesController into the view, we’ll create a binding.

`preferences_binding.dart`

 import 'package:get/get.dart';
 import 'preferences_controller.dart';

 class PreferencesBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => PreferencesController());
  }
 }

Step 4: Running the App

Finally, update main.dart to use the binding and route configuration.

`main.dart`

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'preferences_view.dart';
import 'preferences_binding.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => PreferencesView(),
          binding: PreferencesBinding(),
        ),
      ],
      title: 'Shared Preferences Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
 }

Wrapping Up

With the above code:

You’ve set up a PreferencesController to handle saving and retrieving data.
The PreferencesView allows user interaction and updates the UI based on stored values.
Using GetX binding ensures a clean architecture and efficient state management.

The shared_preferences package makes it easy to store simple data types persistently, enhancing the user experience with features like saved usernames and login status. Get started today and take advantage of this powerful combination of shared_preferences and GetX in your Flutter apps!

How to Use the share plus Package in Flutter with GetX for Easy Content Sharing.

noreply@blogger.com (Sunny Singh) — Tue, 15 Oct 2024 07:00:00 +0000

How to Use `share_plus` in Flutter for Easy Content Sharing (Version 10.0.3)

Are you looking to add a share feature to your Flutter app? The share_plus package offers a seamless way to share text, files, and more across various platforms. This tutorial will show you how to integrate share_plus version 10.0.3 with GetX for clean state management and a full MVC structure, ensuring optimized performance.

Key Benefits of Using `share_plus` in Flutter

The share_plus package is one of the best options for content sharing in Flutter. Here are a few reasons why:

Cross-Platform Compatibility: Works on Android, iOS, Web, macOS, Windows, and Linux.
Simple API: Just a few lines of code to share content across different platforms.
Open Source: It’s free and open-source, maintained by the Flutter community.

Prerequisites

Flutter SDK: Ensure you have Flutter installed.
Add GetX: Install the get package for state management.
Install share_plus: Add the package to your pubspec.yaml file.

 dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  share_plus: ^10.0.3

Run flutter pub get to install the dependencies.

Step 1: Setting up the Controller

The controller will handle the logic for sharing content. In this example, we’ll create a ShareController using GetX.

`share_controller.dart`

import 'package:get/get.dart';
import 'package:share_plus/share_plus.dart';

 class ShareController extends GetxController {
  // Function to share text content
  void shareText(String text) {
    Share.share(text);
  }

  // Function to share content with subject
  void shareWithSubject(String text, String subject) {
    Share.share(text, subject: subject);
  }

  // Function to share files
  void shareFile(String filePath, {String? text}) {
    Share.shareFiles([filePath], text: text);
  }
 }

In this controller:

shareText: This method is for sharing plain text.
shareWithSubject: This method adds a subject to the text.
shareFile: This method allows sharing a file with optional text.

Step 2: Setting up the View

The view will contain a simple UI to demonstrate sharing options. We will use a GetView<ShareController> for dependency injection.

`share_view.dart`

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'share_controller.dart';

class ShareView extends GetView {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Share Plus Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: TextEditingController(),
              decoration: InputDecoration(labelText: 'Text to Share'),
              onChanged: (value) => controller.shareText(value),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => controller.shareText("Hello from Flutter!"),
              child: const Text("Share Text"),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => controller.shareWithSubject(
                "Hello from Flutter!",
                "Greetings",
              ),
              child: const Text("Share with Subject"),
            ),
          ],
        ),
      ),
    );
  }
 }

In this UI:

The text field accepts user input to share as text.
Buttons trigger the share functions using GetX binding.

Step 3: Binding the Controller

Next, bind the ShareController to the view using a custom binding.

`share_binding.dart`

 import 'package:get/get.dart';
 import 'share_controller.dart';

 class ShareBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => ShareController());
  }
 }

Step 4: Configuring Routes and Running the App

Update your main.dart to use ShareBinding when navigating to ShareView.

`main.dart`

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'share_view.dart';
import 'share_binding.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        GetPage(
          name: '/',
          page: () => ShareView(),
          binding: ShareBinding(),
        ),
      ],
      title: 'Share Plus Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
 }

Wrapping Up

With the above code:

You’ve set up a ShareController for handling sharing operations.
You created a UI in ShareView to interact with the sharing functionality.
The GetX bindings make sure everything is injected correctly.

The share_plus package, combined with the GetX architecture, allows you to easily implement content sharing across your Flutter app. Happy coding, and share your awesome content with ease!

What’s New in Flutter 3.24: Complete Guide to the Latest Features and Updates

noreply@blogger.com (Sunny Singh) — Tue, 15 Oct 2024 06:25:00 +0000

Flutter 3.24 introduces a suite of features and improvements designed to enhance both performance and developer experience. Here’s a comprehensive overview of the major updates, along with examples and SEO-focused insights to help rank your post on Google.

1. Dart 3.5 and Language Enhancements

Flutter 3.24 works with Dart 3.5, which includes new language features like pattern matching and record types. These features simplify coding by enabling more expressive and concise code, which makes the development process smoother and helps reduce potential bugs.

2. Graphics and Image Rendering Improvements

The Impeller Graphics Engine in Flutter 3.24 has received performance and visual upgrades, addressing issues related to text rendering. It improves text weight, spacing, and kerning, matching the previous legacy renderer quality.
Image rendering has also been optimized by changing the default FilterQuality to Medium, which makes images sharper, especially when downscaled, and enhances visual consistency without sacrificing performance
DEV Community 200OK Solutions

3. Expanded Widget Functionality

Enhanced SelectionArea Widget: This widget now supports triple-clicks to select entire paragraphs and has improved drag-to-select functionality, making it particularly useful for applications requiring text editing
200OK Solutions
.
New Sliver Components: Flutter 3.24 introduces dynamic Sliver components, including the PinnedHeaderSliver and SliverResizingHeader, enabling app bars to float or resize based on the scroll position. These components enhance the flexibility of app layouts
EvinceDev
CarouselView and TreeView Widgets: The CarouselView widget provides a Material Design-inspired scrolling carousel, while the TreeView widget enables developers to create multi-directional tree structures for hierarchical data representation
200OK Solutions EvinceDev

4. DevTools Enhancements for Better Debugging

Advanced DevTools: With this update, Flutter’s DevTools offers advanced debugging and profiling tools, including deeper insights into memory usage and frame rendering times. These tools are instrumental for identifying performance bottlenecks and optimizing the app’s overall performance, crucial for building high-performance applications across multiple platforms
EvinceDev

5. Shared Preferences Plugin Upgrades

New Shared Preferences features include SharedPreferencesAsync for running preference operations on background threads, reducing UI latency, and SharedPreferencesWithCache for minimizing disk access, which speeds up read operations. This is especially beneficial for apps that frequently read from but infrequently write to preferences
200OK Solutions EvinceDev

6. Cupertino Library and iOS-like Enhancements

The Cupertino library now offers updated haptic feedback for CupertinoActionSheet buttons, matching iOS button styles, and customizable colors for disabled CupertinoTextField. These updates bring Flutter’s iOS-like components closer to native functionality and aesthetics
200OK Solutions EvinceDev

7. Monetization with Video Ads

Flutter 3.24 also brings improved monetization opportunities with support for video ads, which allows developers to integrate in-app video ads seamlessly, enhancing the potential revenue streams for apps
DEV Community

Sample Code for New Slivers

Here’s a quick code snippet for implementing the PinnedHeaderSliver in your app to make the header stick to the top as users scroll:

 import 'package:flutter/material.dart';

 class PinnedHeaderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          pinned: true,
          delegate: _PinnedHeaderDelegate(),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(
              title: Text('Item #$index'),
            ),
            childCount: 50,
          ),
        ),
      ],
    );
  }
 }

 class _PinnedHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Pinned Header',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 60.0;
  @override
  double get minExtent => 60.0;
  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => false;
 }

Flutter 3.24’s updates highlight the framework’s continued evolution, delivering robust new features that streamline development and provide advanced tools for building high-quality, visually engaging cross-platform apps.

How to Create a Dropdown in Flutter: Example Code with Step-by-Step Guide

noreply@blogger.com (Sunny Singh) — Tue, 28 Mar 2023 17:01:00 +0000

How to Create a Dropdown in Flutter

A dropdown widget is a common UI element in Flutter used to display a list of options that a user can select. Typically used in forms, settings, and other input screens, the dropdown widget allows users to choose one option from a list. In Flutter, you can easily create a dropdown using the DropdownButton widget.

What is a Dropdown in Flutter?

The DropdownButton widget in Flutter displays a button that, when pressed, reveals a list of items for the user to choose from. You can customize the dropdown’s appearance using properties like icon, iconSize, style, and isExpanded. This flexibility makes it ideal for creating user-friendly forms and settings screens.

Code Example: Creating a Dropdown in Flutter


 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
  String dropdownValue = 'Item 1';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dropdown List Example'),
        ),
        body: Center(
          child: DropdownButton(
            value: dropdownValue,
            onChanged: (newValue) {
              // setState(() {
              //   dropdownValue = newValue;
              // });
              dropdownValue = newValue!;
              print(dropdownValue);
            },
            items: items.map>((String value) {
              return DropdownMenuItem(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

Explanation of the Code

In the code above, we are creating a simple Flutter app that displays a dropdown button. Here’s a step-by-step breakdown of how it works:

Initialize the List of Items: We start by defining a list of String items (items), which represent the dropdown options. The dropdownValue variable is initialized with a default selection.
Create the DropdownButton Widget: The DropdownButton widget is used to display the dropdown. The value parameter is assigned to dropdownValue, and the onChanged callback updates the dropdownValue whenever the user selects a new option. This ensures that the dropdown reflects the user’s current selection.
Mapping the Items List: The items property requires a list of DropdownMenuItem widgets. We map each string in the items list to a DropdownMenuItem, passing value to each one. This allows Flutter to generate a list of dropdown options.
Customization: You can further customize the dropdown by adding properties like icon to change the dropdown icon, iconSize to adjust the icon size, and isExpanded to control whether the dropdown takes the full width of its container.

Benefits of Using Dropdown in Flutter

Using dropdown widgets enhances the usability of your app by making forms and settings screens more interactive and user-friendly. The DropdownButton widget in Flutter is highly customizable and easy to implement, making it an essential tool for creating intuitive app interfaces.

By following this guide, you can quickly add a functional dropdown to your Flutter app, providing a clean and professional look while keeping your UI responsive and interactive.

Complete Flutter CRUD Operations Example: Build a Functional App with SQLite Database

noreply@blogger.com (Sunny Singh) — Thu, 09 Feb 2023 17:46:00 +0000

Flutter CRUD Operations Example: A Step-by-Step Guide with SQLite

CRUD operations—Create, Read, Update, and Delete—are essential for managing data in any application. In this guide, we’ll cover how to implement CRUD operations in Flutter using Dart and an SQLite database. This approach is ideal for apps that need offline data storage and basic database functionalities.

Step 1: Set Up Your Flutter Project and SQLite Database

To get started, follow these steps:

Create a New Flutter Project: Open your terminal or command prompt, navigate to your preferred directory, and run:

 flutter create flutter_crud_example
 cd flutter_crud_example

Add Dependencies: Open the pubspec.yaml file and add sqflite and path dependencies. These packages help you work with SQLite databases in Flutter:

 dependencies:
  sqflite: ^2.0.0+4
  path: ^1.8.0

Step 2: Define the Database Schema

Let’s create a simple database schema. For this example, we’ll create a Todo model with properties like id, title, and description.

 class Todo {
  final int? id;
  final String title;
  final String description;

  Todo({this.id, required this.title, required this.description});

  // Convert a Todo into a Map
  Map toMap() {
    return {
      'id': id,
      'title': title,
      'description': description,
    };
  }

  // Convert a Map into a Todo
  factory Todo.fromMap(Map map) {
    return Todo(
      id: map['id'],
      title: map['title'],
      description: map['description'],
    );
  }
 }

Step 3: Initialize the Database

Create a new file db_helper.dart to manage database operations. We’ll set up the database and define the CRUD functions here.

import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import 'todo.dart';

 class DatabaseHelper {
  static final DatabaseHelper instance = DatabaseHelper._init();
  static Database? _database;

  DatabaseHelper._init();

  Future get database async {
    if (_database != null) return _database!;
    _database = await _initDB('todo.db');
    return _database!;
  }

  Future _initDB(String filePath) async {
    final dbPath = await getDatabasesPath();
    final path = join(dbPath, filePath);

    return await openDatabase(path, version: 1, onCreate: _createDB);
  }

  Future _createDB(Database db, int version) async {
    const idType = 'INTEGER PRIMARY KEY AUTOINCREMENT';
    const textType = 'TEXT NOT NULL';

    await db.execute('''
 CREATE TABLE Todo ( 
  id $idType, 
  title $textType,
  description $textType
  )
 ''');
  }
 }

Step 4: Implement CRUD Operations

1. Create Operation

The addTodo function inserts a new record into the Todo table.

 Future addTodo(Todo todo) async {
  final db = await instance.database;
  return await db.insert('Todo', todo.toMap());
 }

2. Read Operation

The getTodos function fetches all records from the Todo table.

 Future> getTodos() async {
  final db = await instance.database;
  final result = await db.query('Todo');
  return result.map((json) => Todo.fromMap(json)).toList();
 }

3. Update Operation

The updateTodo function modifies an existing record based on the id.

 Future updateTodo(Todo todo) async {
  final db = await instance.database;
  return await db.update(
    'Todo',
    todo.toMap(),
    where: 'id = ?',
    whereArgs: [todo.id],
  );
 }

4. Delete Operation

The deleteTodo function removes a record from the Todo table.

   Future deleteTodo(int id) async {
  final db = await instance.database;
  return await db.delete(
    'Todo',
    where: 'id = ?',
    whereArgs: [id],
  );
 }

Step 5: Connect the Database to the UI

Now that you have the CRUD operations in place, it’s time to integrate them into your Flutter UI. For simplicity, here’s how you could use a button to add a new todo:

 ElevatedButton(
  onPressed: () async {
    final todo = Todo(
      title: 'Sample Task',
      description: 'Description of the sample task',
    );
    await DatabaseHelper.instance.addTodo(todo);
    print('New task added!');
  },
  child: Text('Add Todo'),
 )

Step 6: Test Your CRUD Operations

Testing is crucial to make sure everything works as expected:

Create: Add a new record and confirm it’s added to the database.
Read: Fetch all records and display them in a list.
Update: Modify an existing record and verify the change.
Delete: Delete a record and ensure it’s removed from the database.

Additional Tips

Error Handling: Implement error handling with try-catch blocks to manage exceptions like database connection failures or invalid queries.
Use Stateful Widgets: For dynamic updates in the UI, such as updating the list of todos after adding or deleting, use StatefulWidget.
Explore State Management: Use Provider, GetX, or Riverpod for better state management if your app scales.
Testing: Write test cases for each CRUD function using Flutter's testing framework to ensure they work correctly.

By following this guide, you’ve built a functional Flutter app with CRUD operations using SQLite. With robust features like data persistence, offline access, and an easy-to-navigate UI, you’re well on your way to creating high-quality Flutter applications.

Step-by-Step Guide to Building an E-Commerce App in Flutter: Complete Tutorial for Beginners

noreply@blogger.com (Sunny Singh) — Mon, 06 Feb 2023 09:24:00 +0000

How to Build an E-Commerce App in Flutter: Step-by-Step Guide for Beginners

Creating an e-commerce app in Flutter is a rewarding experience that allows you to leverage the power of Flutter's rich UI components, cross-platform capabilities, and speed. This guide walks you through the essential steps to build an e-commerce app from scratch, with features like product listings, shopping cart, and payment gateway integration. Whether you’re new to Flutter or have some experience, follow these steps to create your own app and launch it on both Android and iOS.

Step 1: Plan and Design Your App

To start, outline the core features and functionality you want in your e-commerce app. Here are some common features to consider:

User Registration/Login: Enable users to sign up and log in to save their personal information.
Product Listings: Display a list of products with options to filter and sort.
Product Details Page: Show details of each product, including images, descriptions, pricing, and reviews.
Shopping Cart: Let users add items to a shopping cart, update quantities, and view their total.
Payment Gateway Integration: Integrate with payment providers (Stripe, PayPal, etc.) to handle transactions securely.
Order Tracking: Allow users to view their order history and track order statuses.
Push Notifications: Notify users about new arrivals, sales, or special offers.

Take the time to sketch out the user interface for each feature, and decide on a color scheme and overall visual style. Tools like Figma or Adobe XD are great for creating design mockups.

Step 2: Set Up Your Development Environment

To develop a Flutter app, you'll need to install the following:

Flutter SDK: Download from the official Flutter website.
IDE: Use Android Studio, Visual Studio Code, or IntelliJ IDEA for a rich development environment.
Emulator or Physical Device: Set up an Android or iOS emulator, or connect a physical device for testing.

After installation, open your terminal and run flutter doctor to ensure that all dependencies are correctly configured.

Step 3: Build the UI Using Flutter Widgets

Flutter offers a variety of widgets to build a beautiful UI. Here are some screens to develop:

Home Screen: Display product categories, featured products, and banners.
Product Listing Screen: Use ListView or GridView to display a list of products with images, prices, and ratings.
Product Details Screen: Create a detailed page for each product with Column, Image, Text, and Button widgets for essential product information.
Shopping Cart Screen: List all items in the cart, with buttons for increasing/decreasing quantities and calculating the total.
Checkout Screen: Include forms for users to enter shipping information and select payment options.

Step 4: Implement Core Functionality with APIs

Now, let’s add the backend functionalities that make the app dynamic:

Product API Integration: Fetch product data from a RESTful API. Use the http package in Flutter to make HTTP requests. Here’s an example:

 import 'package:http/http.dart' as http;
 Future fetchProducts() async {
  final response = await http.get(Uri.parse('https://api.example.com/products'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load products');
  }
 }

Shopping Cart Management: Use a state management solution like Provider, GetX, or Riverpod to handle adding and removing items from the cart.
Payment Gateway Integration: Integrate a payment gateway like Stripe or PayPal for processing payments. Each provider has specific APIs and SDKs for Flutter.
User Authentication: Implement user sign-up, login, and profile management using Firebase Authentication or your preferred auth provider.
Order Management: Use APIs to handle orders and track the status of each order.

Step 5: Test and Debug Your App

Testing is crucial to ensuring a smooth user experience:

Testing on Devices: Run your app on multiple devices or simulators with different screen sizes to verify responsiveness.
Debugging: Use Flutter’s built-in debugging tools in VS Code or Android Studio to resolve any errors.
User Testing: Consider testing with a small group of users to gather feedback on the app’s functionality and ease of use.

Step 6: Deploy to App Stores

Once testing is complete, you’re ready to publish:

Prepare App Store Assets: Create app icons, screenshots, and promotional images.
Build the App for Release: Run flutter build apk for Android or flutter build ios for iOS.
Register Developer Accounts: Sign up for Google Play Console and Apple Developer Program.
Submit the App: Follow each store's submission guidelines to publish your app. Make sure to fill out all required details and adhere to their policies.

Additional Tips for Building a Successful E-Commerce App

Optimize Performance: Use lazy loading for images, reduce API call frequency, and leverage caching to make the app faster.
Analytics: Integrate tools like Firebase Analytics to track user behavior and improve the app over time.
Push Notifications: Set up push notifications for user engagement using Firebase Cloud Messaging (FCM) or similar services.

By following this guide, you’ll be able to build a fully functional e-commerce app with Flutter, ready for launch on both Android and iOS platforms. With a strong design, robust features, and a well-tested app, you can provide users with a seamless and engaging shopping experience.

Login Sign Up and Forgot Screen With Validation | Flutter UI

noreply@blogger.com (Sunny Singh) — Sat, 02 Apr 2022 06:09:00 +0000

This tutorial is a step-by-step guide to building a Flutter app that integrates login and registration and forgot password features.

Flutter Login Sign Up and Forgot password Design

In this tutorial, you will learn how to create a login and a register and forgot password ui for a flutter project.

Step 1: Add the Dependency to pubspec.yaml file as shown below:

dev_dependencies:
  google_fonts: ^2.1.0

Step 2: Import the library

Now in your Dart code, you can use:

import 'package:google_fonts/google_fonts.dart';

Full Source Code

A main.dart file is a file in the Flutter framework that contains the logic for your app. It is the entry point for the application and is where you can define any variables you need to use in your code.

btn.dart

import 'package:flutter/material.dart';

class ButtonWidget extends StatelessWidget {
  final String text;
  final List backColor;

  final List textColor;
  final GestureTapCallback onPressed;

  const ButtonWidget({
    Key? key,
    required this.text,
    required this.backColor,
    required this.textColor,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Shader textGradient = LinearGradient(
      colors: [textColor[0], textColor[1]],
    ).createShader(
      const Rect.fromLTWH(
        0.0,
        0.0,
        200.0,
        70.0,
      ),
    );
    var size = MediaQuery.of(context).size;
    return SizedBox(
      height: size.height * 0.07,
      width: size.width * 0.9,
      child: InkWell(
        onTap: onPressed,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            gradient: LinearGradient(
              stops: const [0.4, 2],
              begin: Alignment.centerRight,
              end: Alignment.centerLeft,
              colors: backColor,
            ),
          ),
          child: Align(
            child: Text(
              text,
              style: TextStyle(
                foreground: Paint()..shader = textGradient,
                fontWeight: FontWeight.bold,
                fontSize: size.height * 0.02,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Ads

main.dart

import 'package:flutter/material.dart';
import 'package:login_blk/screen/auth.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Login UI',
      home: AuthPage(),
    );
  }
}

auth.dart

This blog shares insight into the login page that's being built with Flutter. The login page will allow users to enter their username and password to authenticate before accessing the app.

This blog shares insight into the register page that's being built with Flutter. The register page will allow users to enter their first name,last name, email and password and confirm password to authenticate before accessing the app.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:login_blk/btn_widget.dart';
import 'package:login_blk/screen/forgot_pass.dart';

class AuthPage extends StatefulWidget {
  const AuthPage({Key? key}) : super(key: key);

  @override
  _AuthPageState createState() => _AuthPageState();
}

class _AuthPageState extends State {
  bool checkedValue = false;
  bool register = true;
  List textfieldsStrings = [
    "", 
    "", 
    "", 
    "", 
    "", 
  ];

  final _firstnamekey = GlobalKey();
  final _lastNamekey = GlobalKey();
  final _emailKey = GlobalKey();
  final _passwordKey = GlobalKey();
  final _confirmPasswordKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;
    return Scaffold(
      body: Center(
        child: Container(
          height: size.height,
          width: size.height,
          decoration: BoxDecoration(
            color: isDarkMode ? const Color(0xff151f2c) : Colors.white,
          ),
          child: SafeArea(
            child: Stack(
              children: [
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(top: size.height * 0.015),
                        child: Align(
                          child: register
                              ? Text(
                                  'Create an Account',
                                  style: GoogleFonts.poppins(
                                    color: isDarkMode
                                        ? Colors.white
                                        : const Color(0xff1D1617),
                                    fontSize: size.height * 0.025,
                                    fontWeight: FontWeight.bold,
                                  ),
                                )
                              : Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'Login',
                                      style: GoogleFonts.poppins(
                                        color: isDarkMode
                                            ? Colors.white
                                            : const Color(0xff1D1617),
                                        fontSize: size.height * 0.05,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    Text(
                                      'Welcome Back',
                                      style: GoogleFonts.poppins(
                                        color: isDarkMode
                                            ? Colors.white
                                            : const Color(0xff1D1617),
                                        fontSize: size.height * 0.025,
                                        fontWeight: FontWeight.normal,
                                      ),
                                    ),
                                  ],
                                ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: size.height * 0.01),
                      ),
                      SizedBox(
                        height: 60,
                        child: register
                            ? buildTextField(
                                "First Name",
                                Icons.person_outlined,
                                false,
                                size,
                                (valuename) {
                                  if (valuename.length <= 2) {
                                    buildSnackError(
                                      'Name is Require',
                                      context,
                                      size,
                                    );
                                    return '';
                                  }
                                  return null;
                                },
                                _firstnamekey,
                                0,
                                isDarkMode,
                              )
                            : Container(),
                      ),
                      SizedBox(
                        height: 60,
                        child: register
                            ? buildTextField(
                                "Last Name",
                                Icons.person_outlined,
                                false,
                                size,
                                (valuesurname) {
                                  if (valuesurname.length <= 2) {
                                    buildSnackError(
                                      'Last name is Require',
                                      context,
                                      size,
                                    );
                                    return '';
                                  }
                                  return null;
                                },
                                _lastNamekey,
                                1,
                                isDarkMode,
                              )
                            : Container(),
                      ),
                      Form(
                        child: SizedBox(
                          height: 60,
                          child: buildTextField(
                            "Email",
                            Icons.email_outlined,
                            false,
                            size,
                            (valuemail) {
                              if (valuemail.length < 5) {
                                buildSnackError(
                                  'Email Id Require',
                                  context,
                                  size,
                                );
                                return '';
                              }
                              if (!RegExp(
                                      r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+")
                                  .hasMatch(valuemail)) {
                                buildSnackError(
                                  'Please Enter Valid Email',
                                  context,
                                  size,
                                );
                                return '';
                              }
                              return null;
                            },
                            _emailKey,
                            2,
                            isDarkMode,
                          ),
                        ),
                      ),
                      Form(
                        child: SizedBox(
                          height: 60,
                          child: buildTextField(
                            "Passsword",
                            Icons.lock_outline,
                            true,
                            size,
                            (valuepassword) {
                              if (valuepassword.length <= 2) {
                                buildSnackError(
                                  'Password is Require',
                                  context,
                                  size,
                                );
                                return '';
                              }
                              if (valuepassword.length < 6) {
                                buildSnackError(
                                  'Password must be at least 6 characters',
                                  context,
                                  size,
                                );
                                return '';
                              }
                              return null;
                            },
                            _passwordKey,
                            3,
                            isDarkMode,
                          ),
                        ),
                      ),
                      Form(
                        child: SizedBox(
                          height: 60,
                          child: register
                              ? buildTextField(
                                  "Confirm Passsword",
                                  Icons.lock_outline,
                                  true,
                                  size,
                                  (valuepassword) {
                                    if (valuepassword != textfieldsStrings[3]) {
                                      buildSnackError(
                                        'Confirm password does not match the entered',
                                        context,
                                        size,
                                      );
                                      return '';
                                    }
                                    return null;
                                  },
                                  _confirmPasswordKey,
                                  4,
                                  isDarkMode,
                                )
                              : Container(),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                          horizontal: size.width * 0.015,
                          vertical: size.height * 0.025,
                        ),
                        child: register
                            ? CheckboxListTile(
                                title: RichText(
                                  textAlign: TextAlign.left,
                                  text: TextSpan(
                                    children: [
                                      TextSpan(
                                        text:
                                            "By creating an account, you agree to our ",
                                        style: TextStyle(
                                          color: const Color(0xffADA4A5),
                                          fontSize: size.height * 0.015,
                                        ),
                                      ),
                                      WidgetSpan(
                                        child: InkWell(
                                          onTap: () {
                                            print('Conditions of Use');
                                          },
                                          child: Text(
                                            "Conditions of Use",
                                            style: TextStyle(
                                              color: const Color(0xffADA4A5),
                                              decoration:
                                                  TextDecoration.underline,
                                              fontSize: size.height * 0.015,
                                            ),
                                          ),
                                        ),
                                      ),
                                      TextSpan(
                                        text: " and ",
                                        style: TextStyle(
                                          color: const Color(0xffADA4A5),
                                          fontSize: size.height * 0.015,
                                        ),
                                      ),
                                      WidgetSpan(
                                        child: InkWell(
                                          onTap: () {
                                            print('Privacy Notice');
                                          },
                                          child: Text(
                                            "Privacy Notice",
                                            style: TextStyle(
                                              color: const Color(0xffADA4A5),
                                              decoration:
                                                  TextDecoration.underline,
                                              fontSize: size.height * 0.015,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                activeColor: const Color(0xff55F233),
                                value: checkedValue,
                                onChanged: (newValue) {
                                  setState(() {
                                    checkedValue = newValue!;
                                  });
                                },
                                controlAffinity:
                                    ListTileControlAffinity.leading,
                              )
                            : InkWell(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            const ForgotPasswordPage()),
                                  );
                                },
                                child: Text(
                                  "Forgot your password?",
                                  style: TextStyle(
                                    color: const Color(0xffADA4A5),
                                    decoration: TextDecoration.underline,
                                    fontSize: size.height * 0.02,
                                  ),
                                ),
                              ),
                      ),
                      AnimatedPadding(
                        duration: const Duration(milliseconds: 500),
                        padding: register
                            ? EdgeInsets.only(top: size.height * 0.025)
                            : EdgeInsets.only(top: size.height * 0.075),
                        child: ButtonWidget(
                          text: register ? "Register" : "Login",
                          backColor: isDarkMode
                              ? [
                                  Colors.black,
                                  Colors.black,
                                ]
                              : const [
                                  Color(0xff000000),
                                  Color(0xff000000),
                                ],
                          textColor: const [
                            Colors.white,
                            Colors.white,
                          ],
                          onPressed: () async {
                            if (register) {
                              if (_firstnamekey.currentState!.validate()) {
                                if (_lastNamekey.currentState!.validate()) {
                                  if (_emailKey.currentState!.validate()) {
                                    if (_passwordKey.currentState!.validate()) {
                                      if (_confirmPasswordKey.currentState!
                                          .validate()) {
                                        if (checkedValue == false) {
                                          buildSnackError(
                                              'Accept our Privacy Policy and Term Of Use',
                                              context,
                                              size);
                                        } else {
                                          print('register');
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            } else {
                              if (_emailKey.currentState!.validate()) {
                                if (_passwordKey.currentState!.validate()) {
                                  print('login');
                                }
                              }
                            }
                          },
                        ),
                      ),
                      AnimatedPadding(
                        duration: const Duration(milliseconds: 500),
                        padding: EdgeInsets.only(
                          top: register
                              ? size.height * 0.025
                              : size.height * 0.15,
                        ),
                      ),
                      RichText(
                        textAlign: TextAlign.left,
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: register
                                  ? "Already have an account? "
                                  : "Don’t have an account yet? ",
                              style: TextStyle(
                                color: isDarkMode
                                    ? Colors.white
                                    : const Color(0xff1D1617),
                                fontSize: size.height * 0.02,
                              ),
                            ),
                            WidgetSpan(
                              child: InkWell(
                                onTap: () => setState(() {
                                  if (register) {
                                    register = false;
                                  } else {
                                    register = true;
                                  }
                                }),
                                child: register
                                    ? Text(
                                        "Login",
                                        style: TextStyle(
                                            foreground: Paint()
                                              ..shader = const LinearGradient(
                                                colors: [
                                                  Colors.blue,
                                                  Colors.indigo,
                                                ],
                                              ).createShader(
                                                const Rect.fromLTWH(
                                                  0.0,
                                                  0.0,
                                                  200.0,
                                                  70.0,
                                                ),
                                              ),
                                            fontSize: size.height * 0.02,
                                            fontWeight: FontWeight.bold),
                                      )
                                    : Text(
                                        "Register",
                                        style: TextStyle(
                                            foreground: Paint()
                                              ..shader = const LinearGradient(
                                                colors: [
                                                  Colors.blue,
                                                  Colors.indigo,
                                                ],
                                              ).createShader(
                                                const Rect.fromLTWH(
                                                    0.0, 0.0, 200.0, 70.0),
                                              ),
                                            fontSize: size.height * 0.02,
                                            fontWeight: FontWeight.bold),
                                      ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  bool pwVisible = false;
  Widget buildTextField(
    String hintText,
    IconData icon,
    bool password,
    size,
    FormFieldValidator validator,
    Key key,
    int stringToEdit,
    bool isDarkMode,
  ) {
    return Padding(
      padding: EdgeInsets.only(top: size.height * 0.025),
      child: Container(
        width: size.width * 0.9,
        height: size.height * 0.05,
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.black : const Color(0xffF7F8F8),
          borderRadius: const BorderRadius.all(Radius.circular(15)),
        ),
        child: Form(
          key: key,
          child: TextFormField(
            style: TextStyle(
                color: isDarkMode ? const Color(0xffADA4A5) : Colors.black),
            onChanged: (value) {
              setState(() {
                textfieldsStrings[stringToEdit] = value;
              });
            },
            validator: validator,
            textInputAction: TextInputAction.next,
            obscureText: password ? !pwVisible : false,
            decoration: InputDecoration(
              errorStyle: const TextStyle(height: 0),
              hintStyle: const TextStyle(
                color: Color(0xffADA4A5),
              ),
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(
                top: size.height * 0.012,
              ),
              hintText: hintText,
              prefixIcon: Padding(
                padding: EdgeInsets.only(
                  top: size.height * 0.005,
                ),
                child: Icon(
                  icon,
                  color: const Color(0xff7B6F72),
                ),
              ),
              suffixIcon: password
                  ? Padding(
                      padding: EdgeInsets.only(
                        top: size.height * 0.005,
                      ),
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            pwVisible = !pwVisible;
                          });
                        },
                        child: pwVisible
                            ? const Icon(
                                Icons.visibility_off_outlined,
                                color: Color(0xff7B6F72),
                              )
                            : const Icon(
                                Icons.visibility_outlined,
                                color: Color(0xff7B6F72),
                              ),
                      ),
                    )
                  : null,
            ),
          ),
        ),
      ),
    );
  }

  ScaffoldFeatureController buildSnackError(
      String error, context, size) {
    return ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(16), topLeft: Radius.circular(16)),
        ),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.black,
        content: SizedBox(
          height: size.height * 0.03,
          child: Text(
            error,
            style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

forgot_pass.dart

import 'package:login_blk/btn_widget.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class ForgotPasswordPage extends StatefulWidget {
  const ForgotPasswordPage({Key? key}) : super(key: key);

  @override
  _ForgotPasswordPageState createState() => _ForgotPasswordPageState();
}

class _ForgotPasswordPageState extends State {
  String email = '';

  final _emailKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDarkMode = brightness == Brightness.dark;
    return Scaffold(
      body: Center(
        child: Container(
          height: size.height,
          width: size.height,
          decoration: BoxDecoration(
            color: isDarkMode ? const Color(0xff151f2c) : Colors.white,
          ),
          child: SafeArea(
            child: Stack(
              children: [
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: size.width * 0.030,vertical: 2),
                        child: Row(
                          children: [
                            InkWell(
                              onTap: () =>
                                  Navigator.pop(context), //go back to authPage
                              child: Icon(
                                Icons.arrow_back_ios,
                                color: isDarkMode ? Colors.white : Colors.black,
                                size: size.height * 0.04,
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(
                                horizontal: size.width * 0.015,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          top: size.height * 0.05,
                          left: size.width * 0.055,
                        ),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'Forgot password',
                            style: GoogleFonts.poppins(
                              color: isDarkMode
                                  ? Colors.white
                                  : const Color(0xff1D1617),
                              fontSize: size.height * 0.035,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: size.width * 0.055),
                        child: Align(
                          child: Text(
                            "Forgot your password?\nProvide your email and we will send you a link to reset your password.",
                            style: GoogleFonts.poppins(
                              color:
                              isDarkMode ? Colors.white54 : Colors.black54,
                              fontSize: size.height * 0.02,
                            ),
                          ),
                        ),
                      ),
                      Form(
                        child: buildTextField(
                          "Email",
                          Icons.email_outlined,
                          false,
                          size,
                              (valuemail) {
                            if (valuemail.length < 5) {
                              buildSnackError(
                                'Email Id Require',
                                context,
                                size,
                              );
                              return '';
                            }
                            if (!RegExp(
                                r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+")
                                .hasMatch(valuemail)) {
                              buildSnackError(
                                'Please Enter Valid Email',
                                context,
                                size,
                              );
                              return '';
                            }
                            return null;
                          },
                          isDarkMode,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: size.height * 0.03),
                        child: ButtonWidget(
                            text: 'Reset',
                            backColor: isDarkMode
                                ? [
                              Colors.black,
                              Colors.black,
                            ]
                                : const [Color(0xff000000), Color(0xff000000),],
                            textColor: const [
                              Colors.white,
                              Colors.white,
                            ],
                            onPressed: () async {
                              if (_emailKey.currentState!.validate()) {
                                print('$email forgot password');
                              }
                            }),
                      ),

                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  bool pwVisible = false;
  Widget buildTextField(
      String hintText,
      IconData icon,
      bool password,
      size,
      FormFieldValidator validator,
      bool isDarkMode,
      ) {
    return Padding(
      padding: EdgeInsets.only(top: size.height * 0.025),
      child: Container(
        width: size.width * 0.9,
        height: size.height * 0.06,
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.black : const Color(0xffF7F8F8),
          borderRadius: const BorderRadius.all(Radius.circular(10)),
        ),
        child: Form(
          key: _emailKey,
          child: TextFormField(
            style: TextStyle(
                color: isDarkMode ? const Color(0xffADA4A5) : Colors.black),
            onChanged: (value) {
              setState(() {
                email = value;
              });
            },
            validator: validator,
            textInputAction: TextInputAction.next,
            obscureText: password ? !pwVisible : false,
            decoration: InputDecoration(
              errorStyle: const TextStyle(height: 0),
              hintStyle: const TextStyle(
                color: Color(0xffADA4A5),
              ),
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(
                top: size.height * 0.02,
              ),
              hintText: hintText,
              prefixIcon: Padding(
                padding: EdgeInsets.only(
                  top: size.height * 0.005,
                ),
                child: Icon(
                  icon,
                  color: const Color(0xff7B6F72),
                ),
              ),
              suffixIcon: password
                  ? Padding(
                padding: EdgeInsets.only(
                  top: size.height * 0.005,
                ),
                child: InkWell(
                  onTap: () {
                    setState(() {
                      pwVisible = !pwVisible;
                    });
                  },
                  child: pwVisible
                      ? const Icon(
                    Icons.visibility_off_outlined,
                    color: Color(0xff7B6F72),
                  )
                      : const Icon(
                    Icons.visibility_outlined,
                    color: Color(0xff7B6F72),
                  ),
                ),
              )
                  : null,
            ),
          ),
        ),
      ),
    );
  }

  ScaffoldFeatureController buildSnackError(
      String error, context, size) {
    return ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(
            topRight: Radius.circular(16),
            topLeft: Radius.circular(16)
        ),),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.black,
        content: SizedBox(
          height: size.height * 0.03,
          child: Text(error,style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold),),
        ),
      ),
    );
  }
}

OUTPUT

Flutter Login Design | Flutter UI | Sweet Alert

noreply@blogger.com (Sunny Singh) — Thu, 31 Mar 2022 16:03:00 +0000

This tutorial is a step-by-step guide to building a Flutter app that integrates login and registration features.

Flutter Login Design

In this tutorial, you will learn how to create a login and a register ui for a flutter project.

Complete Source Code

A main.dart file is a file in the Flutter framework that contains the logic for your app. It is the entry point for the application and is where you can define any variables you need to use in your code.

Step 1: Add the Dependency to pubspec.yaml file as shown below:

dependencies:
  sweetalert: ^0.0.1

Step 2: Import the library

Now in your Dart code, you can use:

import 'package:sweetalert/sweetalert.dart';

Sweet Alert Function

SweetAlert.show(context,
          title: "Login Success !",
          subtitle: "Congratulations",
          style: SweetAlertStyle.success);

Full Source Code

main.dart

import 'package:flutter/material.dart';
import 'package:login_reg_1/animation.dart';
import 'package:sweetalert/sweetalert.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                colors: [Colors.amber, Colors.amber, Colors.amber])),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 80,
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Login",
                    style: TextStyle(color: Colors.white, fontSize: 40),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Welcome Back",
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20))),
                child: SingleChildScrollView(
                  child: Padding(
                    padding: EdgeInsets.all(30),
                    child: Column(
                      children: [
                        SizedBox(
                          height: 60,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                    color: Color.fromRGBO(225, 95, 27, .3),
                                    blurRadius: 20,
                                    offset: Offset(0, 10))
                              ]),
                          child: Column(
                            children: [
                              Container(
                                padding: EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                    border: Border(
                                        bottom:
                                            BorderSide(color: Colors.grey))),
                                child: TextField(
                                  decoration: InputDecoration(
                                      hintText: "Email or Phone number",
                                      hintStyle: TextStyle(color: Colors.grey),
                                      border: InputBorder.none),
                                ),
                              ),
                              Container(
                                padding: EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                    border: Border(
                                        bottom:
                                            BorderSide(color: Colors.grey))),
                                child: TextField(
                                  obscureText: true,
                                  decoration: InputDecoration(
                                      hintText: "Password",
                                      hintStyle: TextStyle(color: Colors.grey),
                                      border: InputBorder.none),
                                ),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 40,
                        ),
                        Text(
                          "Forgot Password?",
                          style: TextStyle(color: Colors.grey,fontSize: 20),
                        ),
                        SizedBox(
                          height: 40,
                        ),
                        InkWell(
                          onTap: (){
                            SweetAlert.show(context,
                                title: "Login Success !",
                                subtitle: "Congratulations",
                                style: SweetAlertStyle.success);
                          },
                          child: Container(
                            height: 50,
                            margin: EdgeInsets.symmetric(horizontal: 50),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(50),
                                color: Colors.amber[900]),
                            child: Center(
                              child: Text(
                                "Login",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 50,
                        ),
                        Text(
                          "Connect with social media",
                          style: TextStyle(color: Colors.grey,fontSize: 18),
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        Row(
                          children: [
                            Expanded(
                                child: Container(
                              height: 50,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  color: Colors.pinkAccent),
                              child: Center(
                                child: Text(
                                  "Instagram",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                              ),
                            )),
                            SizedBox(
                              width: 30,
                            ),
                            Expanded(
                                child: Container(
                              height: 50,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  color: Colors.red),
                              child: Center(
                                child: Text(
                                  "Youtube",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                              ),
                            )),
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

OUTPUT

Sandglass Star Pattern in Dart

noreply@blogger.com (Sunny Singh) — Thu, 31 Mar 2022 06:26:00 +0000

import 'dart:io';
void main() {
  int i, j, k, n = 5;

  for (i = 0; i <= n - 1; i++) {
    for (j = 0; j < i; j++) {
      stdout.write(" ");
    }
    for (k = i; k <= n - 1; k++) {
      stdout.write("*" + " ");
    }
    stdout.writeln("");
  }
  for (i = n - 1; i >= 0; i--) {
    for (j = 0; j < i; j++) {
      stdout.write(" ");
    }
    for (k = i; k <= n - 1; k++) {
      stdout.write("*" + " ");
    }
    stdout.writeln("");
  }
}

OUTPUT


                                       *   *   *   *   * 
                                         *   *   *   * 
                                           *   *   * 
                                             *   * 
                                               * 
                                             *   * 
                                           *   *   * 
                                         *   *   *   * 
                                       *   *   *   *    *

Reverse Pyramid Star Pattern in Dart

noreply@blogger.com (Sunny Singh) — Thu, 31 Mar 2022 06:04:00 +0000

import 'dart:io';
void main() {
  int rows = 5;
  for (int i = 0; i < rows; i++) {
    for (int j = 0; j <= i; j++) {
      stdout.write(" ");
    }

    for (int k = 0; k <= rows - 1 - i; k++) {
      stdout.write("* ");
    }

    stdout.writeln();
  }
}

OUTPUT


     * * * * * 
     * * * * 
     * * * 
     * * 
    *

Pyramid star pattern in Dart

noreply@blogger.com (Sunny Singh) — Thu, 31 Mar 2022 05:47:00 +0000

import 'dart:io';
void main() {
  int rows = 5;
  for (int i = 0; i < rows; i++) {
    for (int j = (rows - i); j > 1; j--) {
      stdout.write(" ");
    }
    for (int j = 0; j <= i; j++) {
      stdout.write("* ");
    }
    stdout.writeln();
  }
}

OUTPUT


    * 
   * * 
  * * * 
 * * * * 
* * * * *

Codes With Sunny

What’s New in Flutter 3.41

Introduction — Flutter 3.41 Overview

1. Structural Transparency & Modularity

🗓 Public Stable Release Windows

Decoupling Flutter’s Design Libraries

2. Ecosystem Standards & Platform Integration

📦 Swift Package Manager & iOS Lifecycle

Android Gradle Plugin & Kotlin DSL

3. Asset & Platform Optimizations

🎯 Platform-Specific Asset Bundling

4. Framework & API Improvements

🌀 RepeatingAnimationBuilder

🪟 Navigation & Scrolling Enhancements

5. Platform Fidelity Improvements

🍎 iOS Visual Polish

🧲 Drag Handling & Desktop Behavior

Add-to-App Resizing

6. Accessibility & Web Enhancements

🧩 Accessibility Improvements

7. DevTools & Performance

🐞 DevTools Performance Boost

Key Takeaways — Should You Upgrade?

👍 Why You Should

Conclusion — Flutter 3.41 in Perspective

Flutter Travel Search & Result UI Design – Step-by-Step Guide with Source Code

Flutter Travel Search & Result UI Design (Step-by-Step)

Features of Flutter Travel Search UI

1. Travel Search Screen

2. Travel Search Result Screen

Flutter UI Design Approach

Building a Modern Travel App UI with Flutter

Flutter Travel App UI – Complete Code Implementation

HomeScreenUI

DetailsUI

What’s New in Flutter 3.38 — Write Less, See More, Build Faster (Enhanced Overview)

Introduction

1. Dot Shorthands — Write Less, Do More

✔ Before (old verbose way)

✔ After (new shorthand magic ✨)

✔ Even for named constructors!

Why it’s awesome:

2. Web Improvements — Faster, Smarter, Team-Friendly

2.1 Web Development Configuration File

2.2 Proxy Support for Web Development

2.3 Expanded Hot Reload Support on Web

3. Framework Enhancements — Smarter UI & Navigation

3.1 OverlayPortal Buffed

Use cases:

3.2 Predictive Back Gesture Enabled by Default (Android)

3.3 Desktop: Multi-Monitor Support (Windows)

3.4 More Resilient Widget Lifecycle

4. Material & Cupertino Updates — Better UI Consistency

New Enhancements:

✔ IconButton now supports statesController

✔ Badge.count gets maxCount

✔ InkWell adds onLongPressUp

✔ Cupertino Improvements

5. Scrolling Improvements — Predictable Slivers

Fixes include:

6. Accessibility Boosts — More Inclusive Apps

New & improved:

7. iOS: Major Compatibility Updates

New deployment uses:

UIScene Lifecycle Migration (Important!)

8. Android — Critical Updates

8.1 16 KB Page Size Support

8.2 Major Memory Leak Fix

8.3 Updated Android Dependency Stack

9. Engine Improvements — Smoother Rendering

10. DevTools & IDE Updates — Widget Previews Evolved

Final Thoughts

How to Merge Images in Python: A Complete Guide for Beginners

How to Merge Images in Python

Why Merge Images in Python?

Method 1: Merging Images Using Pillow (PIL)

Step 1: Install Pillow

Step 2: Merge Images Horizontally or Vertically

How to Chunk Images Using Python & Compress to WebP for Faster Loading

Chunk Images Using Python

✔ `IconButton` now supports `statesController`

✔ `Badge.count` gets `maxCount`

✔ `InkWell` adds `onLongPressUp`

What is `connectivity_plus`?

Why Use `connectivity_plus` in Flutter?

Features of `connectivity_plus`

Installing `connectivity_plus` in Your Flutter Project

How to Use `flutter_local_notifications` in Flutter with GetX: Full Code Example with Beautiful UI

`notification_controller.dart`

`notification_view.dart`

`notification_binding.dart`

`main.dart`

`otp_controller.dart`

`otp_view.dart`

`otp_binding.dart`

`main.dart`

Using `cached_network_image` in Flutter with GetX: Optimize Image Loading with Caching

`image_controller.dart`

`image_view.dart`

`image_binding.dart`

`main.dart`