Image Blur Background in Flutter

By

-

June 16, 2023

Hi Guy’s Welcome to Proto Coders Point, In this flutter article let’s learn how to blur an image in flutter, Basically will learn how to apply blur filter to a Image Widget.

Blur Background Image in flutter

In order to give blur effect to a Image, We will make use of ImageFiltered Widget with imageFilter: property and apply ImageFilter.blur() with X & Y axis Sigma on top of Image Widget as Parent widget.

ImageFilter.blur constructor

ImageFilter.blur(
                  sigmaX: 10,
                  sigmaY: 10
)

Complete Source Code – Apply Blur Background Image

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          SizedBox.expand(
            child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                  sigmaX: 10,
                  sigmaY: 10
                ),
            child: Image.network(
                'https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=',
              fit: BoxFit.fill,
            )),
          ),
           Image.network('https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=')
        ],
      )
    );
  }
}

Output

Video Tutorial

Flutter Draw Bezier Curve with ClipPath

By

Rajat Palankar

-

June 15, 2023

0

Flutter Bezier Curve Wave using customClipper

Hi Guy’s Welcome to Proto Coders Point, In this flutter tutorial we learn how to create a Bezier Curve which looks like a water wave.

To draw a Bezier curve in flutter we will be using ‘ClipPath’ widget using we can give any shape to it’s child(Container).

Step’s

Create a class that extends CustomClipper class
Override CustomClipper class methods i.e. getClips and shouldReclip
In getClip() method define the cliping shape
then finally provide the customclipper class to ClipPath Widget

CustomClipper Class

The Below clip path code will give a curve shape, that will can then apply to ClipPath widget

path.lineTo(0, size.height * 0.75); Will draw a straight line from current position to the height been defined.

The first path.quadraticBezierTo() will draw a first half of Bezier curve from current point.

The second path.quadraticBezierTo() draw a second half Bezier curve making it look like a water wave.

then finally path.lineTo(size.width,0); draw a straight line from the last curve point to the top-right corner that’s completes the clipPath class.

class BezierClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
   Path path = Path();
   path.lineTo(0, size.height * 0.75);

   path.quadraticBezierTo(
       size.width * 0.25,
       size.height * 0.5,
       size.width * 0.5,
       size.height * 0.75
   );
   //
   path.quadraticBezierTo(
       size.width * 0.75,
       size.height * 1,
       size.width,
       size.height * 0.75
   );
   path.lineTo(size.width,0);
   return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

Use CustomClipper class into ClipPath widget to clips

Scaffold(
      body: Stack(
        children: [
          Container(
            color: Colors.blueAccent,
          ),
          ClipPath(
            clipper: BezierClipper(),
            child: Container(
              color: Colors.black,
              height: 400,
            ),
          )
        ],
      )
    );

Output

How AI Is Shaping the Future of Customer Interactions

By

Rajat Palankar

-

June 13, 2023

0

Natural language processing in customer interactions

As technology continues to advance, the way companies interact with their customers is also changing. One of the most significant developments in recent years has been the use of artificial intelligence (AI) in customer interactions.

AI has the potential to revolutionize the way companies interact with their customers, improving efficiency, personalization, and customer satisfaction. In this article, we’ll explore the benefits, examples, impact, ethical considerations, challenges, and future of AI in customer interactions.

Introduction to AI and Customer Interactions

Artificial intelligence is the simulation of human intelligence in machines that can learn and perform tasks that typically require human intelligence, such as visual perception, speech recognition, decision-making, and language translation. In customer interactions, AI can be used to automate and personalize customer service, sales, and marketing processes.

AI-powered chatbots, voice assistants, and recommendation engines can provide customers with instant and accurate responses, 24/7, without the need for human intervention. AI can also analyze customer data to identify patterns, preferences, and behaviors, allowing companies to offer personalized products and services that meet individual needs.

The Benefits of Implementing AI in Customer Interactions

Implementing AI in customer interactions offers several benefits, including:

Improved Efficiency: AI can handle a large volume of customer requests simultaneously, reducing the need for human agents and wait times. AI-powered chatbots can handle routine queries such as order tracking, FAQs, and product recommendations, allowing human agents to focus on more complex issues.

Personalization: AI can analyze customer data to offer personalized recommendations, promotions, and services that meet individual needs. By understanding customer preferences and behaviors, AI can create a more personalized experience for each customer, increasing customer loyalty and satisfaction.

24/7 Availability: AI-powered customer interactions are available 24/7, providing customers with instant and accurate responses regardless of time zones and working hours. This ensures that customers can get help and information when they need it, improving their overall experience.

Examples of AI-Powered Customer Interactions

There are several examples of AI-powered customer interactions, including:

Chatbots: AI-powered chatbots can handle customer inquiries and support requests via chat, email, or social media. Chatbots use natural language processing (NLP) to understand customer queries and provide accurate and relevant responses. They can also escalate complex requests to human agents, ensuring that customers receive the best possible support.

Voice Assistants: AI-powered voice assistants, such as Amazon Alexa and Google Assistant, allow customers to interact with brands using voice commands. Customers can place orders, track shipments, and get personalized recommendations using voice commands, making the process more convenient and hands-free.

Recommendation Engines: AI-powered recommendation engines use customer data to offer personalized product recommendations. By analyzing customer purchase history, browsing behavior, and preferences, recommendation engines can suggest products and services that meet individual needs, increasing customer satisfaction and sales.

The Impact of AI on Customer Experience

The impact of AI on customer experience is significant. AI-powered customer interactions can help companies provide faster, more accurate, and personalized support, leading to increased customer satisfaction and loyalty.

AI can also help companies identify customer needs and preferences, offering more targeted products and services that meet individual needs. AI can also provide insights into customer behavior and sentiment, allowing companies to improve their products and services based on customer feedback.

However, AI can also have a negative impact on customer experience if not implemented correctly. Poorly designed chatbots or recommendation engines can provide inaccurate or irrelevant information, leading to customer frustration and dissatisfaction. Privacy concerns also arise when customer data is collected and used without their consent or knowledge.

Ethical Considerations of AI in Customer Interactions

As AI becomes more prevalent in customer interactions, ethical considerations become more critical. The use of AI in customer interactions raises questions about privacy, transparency, and accountability. Companies must ensure that customer data is protected and used ethically, with clear guidelines and policies in place. Customers must also be informed about how their data is collected and used and have the right to opt-out or delete their data at any time.

How to Implement AI in Your Customer Interactions Strategy

Implementing AI in customer interactions requires careful planning and execution. Here are some steps to consider:

Identify the Use Cases: Identify the areas where AI can be most beneficial, such as customer service, sales, or marketing. Determine the types of interactions that can be automated or personalized using AI.

Choose the Right Technology: Choose the AI technology that best fits your business needs and budget. Consider factors such as ease of implementation, scalability, and integration with existing systems.

Train the AI: Train the AI to understand customer queries and provide accurate and relevant responses. Use real customer interactions to train the AI, ensuring that it can handle a wide range of queries and scenarios.

Monitor and Improve: Monitor the AI’s performance and gather feedback from customers. Continuously improve the AI by analyzing customer data and making adjustments to the algorithms and scripts.

Key Challenges of AI in Customer Interactions

Implementing AI in customer interactions also comes with several challenges, including:

Data Quality: AI relies on accurate and high-quality data to function correctly. Poor data quality can result in inaccurate and irrelevant responses, affecting customer satisfaction.

Integration: Integrating AI with existing systems can be complex and time-consuming, requiring significant IT resources and expertise.

Cost: Implementing AI can be expensive, requiring investments in technology, training, and maintenance.

The Future of AI and Customer Interactions

The future of AI and customer interactions is bright. As technology continues to advance, AI will become more sophisticated and capable of handling complex interactions. AI ChatGPT will also become more human-like, allowing customers to interact with brands in more natural and intuitive ways. AI will also play a more significant role in predicting customer needs and preferences, offering personalized products and services that meet individual needs.

Successful Case Studies of AI in Customer Interactions

Several companies have successfully implemented AI in their customer interactions, including:

H&M: H&M uses an AI-powered chatbot to handle customer inquiries and support requests. The chatbot can handle queries in multiple languages and provide personalized recommendations based on customer preferences.
Starbucks: Starbucks uses an AI-powered voice assistant to allow customers to place orders using voice commands. Customers can also check their rewards balance and get personalized recommendations based on their purchase history.

Sephora: Sephora uses an AI-powered recommendation engine to offer personalized product recommendations. The recommendation engine considers factors such as skin type, color preferences, and purchase history to suggest products that meet individual needs.

Conclusion

AI is shaping the future of customer interactions, offering significant benefits in terms of efficiency, personalization, and customer satisfaction. However, the implementation of AI in customer interactions requires careful planning and execution, with ethical considerations and challenges to consider.

Companies that successfully implement AI in their customer interactions can enjoy a competitive advantage, offering faster, more accurate, and personalized support to their customers. The future of AI and customer interactions is exciting, with the potential to transform the way companies interact with their customers.

Flutter NeoPop Package – 3D component library by Cred club

By

Rajat Palankar

-

June 12, 2023

0

flutter neopop 3d component library — flutter neopop button

Hi Guy’s Welcome to Proto Coders Point, In this Flutter Article will check out how to create a stunning & attractive UI in flutter, Basically in this tutorial we will learn how to create 3D button in flutter. One package i caught into my attention of Flutter enthusiasts is the flutter NeoPop Package provided by Cred.club.

Flutter NeoPop Package

NeoPop is a 3D component library through which we can build beautiful 3D components like 3d buttons, As I said Flutter NeoPop package is developed by Cred.club. NeoPop simplifies a process of intergrating 3D elements into flutter apps, and reduce development time as there is no need to write complex code we just need to use NeoPop widgets and customize it as per our needs.

The key feature of flutter NeoPop widget is extensive collection of pre-defined 3D widgets. 3D components that include buttons, cards, sliders, toggle and 3d buttons. and developer can easily customize those widgets as per need.

Video Tutorial

Integration of NeoPop into flutter project

To use the package first of all we must add it as dependency in pubspec.yaml file, so open pubspec.yaml file and under dependencies section add:

dependencies:
  neopop: ^1.0.2

Now, To use it all you need to do is import the package where required into the code

import 'package:neopop/neopop.dart';

NeoPopButton

Elevated Button

NeoPopButton(
    color: Colors.white,
    onTapUp: () => HapticFeedback.vibrate(),
    onTapDown: () => HapticFeedback.vibrate(),
    child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Text("Pay now"),
            ],
        ),
    ),
),

Neopop Flat Button

NeoPopButton(
    color: Colors.white,
    onTapUp: () => HapticFeedback.vibrate(),
    onTapDown: () => HapticFeedback.vibrate(),
    parentColor: Colors.transparent,
    buttonPosition: Position.center,
    child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
                Text("Pay Now"),
            ],
        ),
    ),
),

NeoPopTiltedButton with shimmer effect

NeoPopTiltedButton(
    isFloating: true,
    onTapUp: () {},
    decoration: const NeoPopTiltedButtonDecoration(
        color: Color.fromRGBO(255, 235, 52, 1),
        plunkColor: Color.fromRGBO(255, 235, 52, 1),
        shadowColor: Color.fromRGBO(36, 36, 36, 1),
        showShimmer: true,
    ),
    child: const Padding(
        padding: EdgeInsets.symmetric(
        horizontal: 70.0,
        vertical: 15,
        ),
        child: Text('Play Now'),
    ),
),

Get More Example of 3d NeoPop Button Example from official documentation

Flutter Isolate – Run Task in Background – MultiThreading

By

Rajat Palankar

-

June 10, 2023

0

isolates in flutter — Multithreading in Flutter using Dart isolates

Hi Guy’s Welcome to Proto Coders Point, You might be knowing about flutter isolate but did not understood why & how to to use it in flutter development.

What is Isolate in flutter

As you know that dart is a single threaded programming language, That means that dart can only perform single task at a time as In other langauges just like how we have thread, In dart language we have Isolates. Isolate in flutter is a seperate instance of Dart that will run concurrently with the main UI thread. With Isolate you can run a code parallel/seperately to ensure that the app runs smoothly & responsively when heavy & intensive operation is running at the background we use flutter isolates.

When to use flutter Isolates

You might be developing a flutter application & there might be a feature to be added in app that taks sometime to excute fully and may be heavy computation, communication netword operation, File I/o & all this you need to handle without blocking the user interface (UI) like causing laggy I+UI while the heavy task is running at backend with main thread.

About Flutter Isolate

In flutter dart, Isolate has it’s own memory heap where it perform the event loop, you can communicate between Isolate by using ‘sendPort’ , ‘receivePort’. In general I can say, Isolate are individual worker that can do the given task without affecting main UI thread & as you know that dart language is single threaded, By using Isolate in code you can acheive multiThreading in flutter application.

Video Tutorial

Why to use Isolate in flutter app

Before understanding why to use Isolate let’s check what happens when we perform heavy task & don’t use Isolates.

In Below code example without Isolate. In UI, I simply have a circularProgressIndicator() widget and a Button at the center of the screen.

When Button is press we call a function that will iterate a forLoop for almost 4 billion times which make the main thread busy, and thus as main thread is busy, Until this thread is free the UI component freezes & stuck until the loop completes.

code:

  int heavyLoad(int iteration){
    int value = 0;

    for(int i = 0;i<iteration;i++)
      value=i++;

    print(value);
    return value;

  }

Simply calling the above function when a button is pressed.

ElevatedButton(
                onPressed: (){
                  heavyLoad(4000000000);
                  },
  child: Text("Start Heavy Process without Isolate")),

Multithreading in Flutter using Dart isolates

Same thing let’s check what happens when we use Isolate to perform same task as above code does.

When button is been pressed let’s call a Isolate Function Instead of Normal function.

When you run flutter app note that the CircularProgressIndicator() which was getting freezed with now won’t affect & the UI will run smoothly as expected.

Code:

useIsolate() async{
  final ReceivePort receivePort = ReceivePort();

  try{
    await Isolate.spawn(runTask, [receivePort.sendPort,4000000000]);
  } on Object{
    print("Isolate Failed");
    receivePort.close();
  }
  final response = await receivePort.first;
  print('data Processed ${response}');
}

int runTask(List<dynamic> args){
  SendPort  resultPort = args[0];
  int value = 0;
  for(int i = 0;i<args[1];i++)
    value=i++;

  Isolate.exit(resultPort,value);
}

Calling a Isolate Function when button is pressed

ElevatedButton(
                onPressed: (){
                  useIsolate();
                },
                child: Text("Start Heavy Process with isolate")
)

ReceivePort allow isolate to listen for incoming message.

To create RecieverPort will use ‘ReceiverPort()’ constructor class.

Note: That each Isolate has it’s own ‘ReceiverPort’ can have multiple RecievedPot instance for handling different message.

SendPort is used to send message from one isolate to another, to send message to another isolate, we can use ‘send()’ method on SendPort instance with the message.

Conclusion

In conclusion, Flutter isolates are a powerful tool for running background tasks, achieving multitasking, and maintaining a responsive UI. By utilizing isolates effectively, developers can ensure optimal performance, responsiveness, and a seamless user experience in their Flutter applications.

How to make flutter app responsive

By

Rajat Palankar

-

June 9, 2023

0

While developing any application my be it’s web or mobile application, A Frontend developer should always keep in mind to make it responsive.
Below are few example to make a flutter application responsive:

1. Utilize flutter’s flexible layout widgets:

In flutter flexible widgets are Row, Column & Expanded widgets that can make a app responsive.

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

2. Leverage Media Query for adoptive design:

App should be auto responsive depending on different screen size & the orientation & can be done using flutter MediaQuery class.

Container(
              color: Colors.red,
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
     )

3. Design with device-agnostic elements

Relative dimensions & scalable fonts, you need to also make text content auto resize depending on screen size the app is running.

final textScaleFactor = MediaQuery.of(context).textScaleFactor;

Text(
  'Sample Text',
  style: TextStyle(fontSize: 16.0 * textScaleFactor),
)

4. Use responsive flutter package

To make flutter application responsive we can make use of flutter_screenutil package that will make our work hand in making app responsive.

Container(
  width: ScreenUtil().setWidth(200), // Set width based on the reference screen size
  height: ScreenUtil().setHeight(100), // Set height based on the reference screen size
  child: Text(
    'Sample Text',
    style: TextStyle(fontSize: ScreenUtil().setSp(16)), // Set font size based on the reference screen size
  ),
)

5. Optimize Image assets

Loading images in flutter app & making it optimize is an important task of flutter developer. Optimize image assets from different resolution using flutter Image.assets() widget parameter.

Image.asset(
                'assets/images/flutter_bird.png',
                width: 100,
                height: 100,
                fit: BoxFit.cover,
         )

6. Implement device-specific layouts

LayoutBuilder & Orientation Builder are usually used to create a responsive UI in flutter application.

LayoutBuilder: Is a widget in flutter by which we can build a UI basied on constraints of it’s parrent widget, By using LayoutBuilder we can dynamically adjust the laput and the available space, code Snippet Example Below:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    // Use the constraints to build a responsive UI
    if (constraints.maxWidth > 600) {
      return DesktopLayout();
    } else {
      return MobileLayout();
    }
  },
)

2. OrientationBuilder: Depending on device orientation, may be it’s portrait or landscape mode, you need to build different UI’s when device is in different orientation mode.

OrientationBuilder(
  builder: (BuildContext context, Orientation orientation) {
    // Use the orientation to build a UI for each mode
    if (orientation == Orientation.portrait) {
      return showPortraitConfig();
    } else {
      return showLandscapeConfig();
    }
  },
)

7. Flutter app scrolling must be smooth

Make use of flutter’s sliver widget from efficient scrolling the complex layout

CustomScrollView(
  slivers: <Widget>[
    // SliverAppBar: A scrolling app bar that collapses when scrolling down
    SliverAppBar(
      title: Text('Custom Scroll View Example'),
      floating: true,
      // Additional configuration properties...
    ),
    // SliverList: A scrollable list of items
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 20, // Number of list items
      ),
    ),
    // Additional slivers...
  ],
)