曾 俊

曾 俊

1660675140

使用 Flutter 构建 Chrome 扩展

自2018 年 12 月 4 日首次发布Flutter 1.0以来,Flutter 已经在野外存在了很长一段时间,并得到了社区的非常惊人的响应。

如果你在这里,你可能已经知道Flutter——一个由谷歌推出的跨平台框架,能够在 Android、iOS、Web、macOS、Linux、Windows 和更多种类的设备上运行。

随着Flutter 3.0的推出,macOS 和 Linux 平台也得到了稳定的支持。所以,现在 Flutter 可以称得上是一个真正的自适应多平台框架,稳定支持 Android、iOS、Web、macOS、Linux 和 Windows——这简直太棒了!🥳

但是等等……那些“更多种类的设备”呢?

其中包括各种知名的物联网设备(Raspberry Pi 和 Arduino)、智能手表(Apple Watch 和 Google 的 WearOS 设备)、VR 耳机(Meta Quest 2)、游戏机(Xbox),以及一些更独特的 Flutter 运行方式应用程序。

Flutter 仍在这些平台上进行测试(希望很快会有稳定的版本发布)——如果你想看看如何使用Flutter 与物联网设备交互。

今天,我们将探索一种将 Flutter 应用程序作为chrome 扩展程序运行的独特方式——相信我,这真的很简单 😁。

TL;DR:您可以使用带有标志的 HTML 渲染器生成 Flutter Web 构建--csp,并且可以将其用作 chrome 扩展。

欲了解更多信息,请继续关注。

在我们深入构建扩展之前,让我们大致了解一下 chrome 扩展。

什么是 Chrome 扩展程序?

扩展是可以安装在浏览器中的轻量级软件程序。它们可以在浏览器中轻松访问,有助于增强用户体验。

您可以从Chrome 网上应用店签出并安装任何扩展程序,有多种可用的扩展程序,如生产力工具、购物、有趣的游戏等。

扩展与 Web 应用程序非常相似,因为它们使用相同的核心技术,例如HTMLJavaScriptCSS。但它们在单独的沙盒执行环境中运行。

扩展概述

只是为了给你一些背景信息,今天我们将使用 Flutter构建一个QR 码生成器扩展。

使用此扩展程序,您可以通过提供文本或 URL 轻松生成 QR 码。二维码的颜色可以自定义,你可以修改二维码的前景色和背景色。

探索基本的 Flutter 项目

让我们从创建一个新的 Flutter 项目开始。

您可以使用与创建任何基本 Flutter 项目完全相同的 Flutter 命令:

flutter create qr_code_extension

qr_code_extension是 Flutter 项目的名称。仅供参考,我目前使用的是Flutter 3.0 版

创建项目后,使用您喜欢的 IDE 打开它。我将使用 VS Code,如果你有它的 CLI 设置,只需运行以下命令打开项目:

code qr_code_extension

如果您熟悉 Flutter,那么您已经知道生成的项目是演示计数器应用程序(代码存在于lib/main.dart文件中)。

在继续之前,通过在 Chrome 上运行来测试演示 Flutter 应用程序(您可以在任何浏览器上进行测试,但由于我们将构建一个 chrome 扩展,所以无论如何您需要在系统上安装Chrome)。

如果您在 VS Code 中,只需选择 Chrome 作为目标平台(从底部栏中),然后按“ fn + F5 ”构建并启动应用程序。否则,您可以使用以下命令在 Chrome 上运行应用程序:

颤振运行 -d Chrome

这将在 Chrome 浏览器上启动计数器应用程序:

您可以通过单击 IDE 的停止按钮或在您启动应用程序的终端中键入“ q ”来退出正在运行的应用程序。

修改为作为扩展运行

现在,进入最重要的部分——如何将这个基本的 Flutter Web 应用程序作为 chrome 扩展程序运行?🤔

只需三步……

1. 删除不支持的脚本index.html

导航到web/index.html文件并删除所有<script>..</script>标签:

然后只在里面插入以下<script>标签<body>

<script src="main.dart.js" type="application/javascript"></script>

2.设置扩展视图尺寸

扩展具有固定的尺寸,因此您需要在 HTML 中明确指定扩展视图的宽度高度值。

只需将起始<html>标签替换为以下内容:

<html style="height: 600px; width: 350px">

这会将扩展视图的高度和宽度分别设置为 600 像素和 350 像素。

3.对manifest.json做一些修改

导航到web/manifest.json文件并将整个内容替换为以下内容:

{
    "name": "QR Code Extension",
    "description": "QR Code Extension",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icons/Icon-192.png"
    },
    "manifest_version": 3
}

尝试扩展

完成所需的更改后,您就可以将其作为 Chrome 扩展程序构建和运行了。

默认情况下,当您使用以下命令运行 Flutter Web 构建时:

flutter build web

它为移动浏览器使用 HTML 渲染器,为桌面浏览器使用 CanvasKit 渲染器。

为了提供一点上下文,Flutter web 支持两种类型的渲染器(根据Docs):

HTML 渲染器

使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合。此渲染器具有较小的下载大小。

CanvasKit 渲染器

此渲染器具有更快的性能和更高的小部件密度(支持像素级别的操作),但下载大小增加了约 2MB。

但是为了将其用作扩展,您必须仅使用 HTML 渲染器专门生成构建。可以使用以下命令完成:

flutter build web --web-renderer html

🛑 不要运行命令!

最后,您必须使用该--csp标志来禁用在生成的输出中动态生成代码,这是满足CSP 限制所必需的。

🟢 运行这个命令:

flutter build web --web-renderer html --csp

您将build/web在 Flutter 项目根目录中的文件夹中找到生成的文件。

要安装和使用此扩展程序,请从 Chrome 浏览器访问此 URL:

chrome://extensions

此页面列出了所有 Chrome 扩展程序(如果您已安装)。

1.启用网页右上角的开发者模式切换。

2. 点击加载解压

3. 选择<flutter_project_dir>/build/web文件夹。

您将看到新扩展现已添加到该页面。

该扩展程序将自动安装,您可以像任何常规扩展程序一样通过单击顶部栏中的扩展程序图标来访问它(也可以固定它以便于访问)。

实际实施

现在让我们进入一个实际的实现,并使用 Flutter 构建 QR 码生成器扩展。

首先,转到目录中main.dart存在的lib文件。将该页面的全部内容替换为以下内容:


import 'package:flutter/material.dart';

import 'qr_view.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chrome Extension',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const QRView(),
    );
  }
}

这只是为了简化应用程序的起点,并删除与演示计数器应用程序相关的代码。

接下来,在lib名为qr_view.dart. 在这个文件中,我们将添加用于构建 QR 码扩展 UI 的代码和一些用于根据TextField.

为了在 UI 中渲染二维码,我们将使用一个名为qr_flutter的 Flutter 包。从 Flutter 根目录运行以下命令来安装这个包:

flutter pub add qr_flutter

将以下代码添加到qr_view.dart文件中:


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

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

  @override
  State<QRView> createState() => _QRViewState();
}

class _QRViewState extends State<QRView> {
  late final TextEditingController _textController;
  late final FocusNode _textFocus;
  String qrText = '';
  int qrColorIndex = 0;
  int qrBackgroundColorIndex = 0;

  @override
  void initState() {
    _textController = TextEditingController(text: qrText);
    _textFocus = FocusNode();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: Add the UI code here
    return Scaffold();
  }
}

在上面的代码中,我们已经导入了qr_flutter包,还为TextField小部件初始化了一些变量,用于访问当前选择的二维码背景前景色

lib现在,在名为的目录中创建另一个文件,color_list.dart并添加要显示为 QR 码背景和前景色选择的颜色列表。

import 'package:flutter/material.dart';

const List<Color> qrBackgroundColors = [
  Colors.white,
  Colors.orange,
  Colors.blueGrey,
  Colors.red,
  Colors.greenAccent,
];

const List<Color> qrColors = [
  Colors.black,
  Colors.purple,
  Colors.white,
  Colors.green,
  Colors.blue,
];

最后,完成扩展的用户界面。

这是小部件的完整代码QRView以及扩展的 UI:

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

import 'color_list.dart';

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

  @override
  State<QRView> createState() => _QRViewState();
}

class _QRViewState extends State<QRView> {
  late final TextEditingController _textController;
  late final FocusNode _textFocus;
  String qrText = '';
  int qrColorIndex = 0;
  int qrBackgroundColorIndex = 0;

  @override
  void initState() {
    _textController = TextEditingController(text: qrText);
    _textFocus = FocusNode();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 16.0,
          vertical: 24.0,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: QrImage(
                data: qrText,
                padding: const EdgeInsets.all(16),
                backgroundColor: qrBackgroundColors[qrBackgroundColorIndex],
                foregroundColor: qrColors[qrColorIndex],
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 24.0,
                  vertical: 16,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    TextField(
                      controller: _textController,
                      focusNode: _textFocus,
                      decoration: InputDecoration(
                        labelText: 'QR Text',
                        labelStyle: const TextStyle(
                          color: Color(0xFF80919F),
                        ),
                        hintText: 'Enter text / URL',
                        hintStyle: const TextStyle(
                          color: Color(0xFF80919F),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                            color: Colors.black54,
                            width: 2,
                          ),
                          borderRadius: BorderRadius.circular(16),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: const BorderSide(
                            color: Colors.black,
                            width: 2,
                          ),
                          borderRadius: BorderRadius.circular(16),
                        ),
                      ),
                      onChanged: (value) => setState(() {
                        qrText = value;
                      }),
                    ),
                    const SizedBox(height: 24),
                    const Text(
                      'Choose QR Color',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                    Expanded(
                      child: ListView.separated(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        separatorBuilder: (_, __) => const SizedBox(width: 8),
                        itemCount: qrColors.length,
                        itemBuilder: (context, index) {
                          return InkWell(
                            hoverColor: Colors.transparent,
                            splashColor: Colors.transparent,
                            highlightColor: Colors.transparent,
                            onTap: () => setState(() {
                              qrColorIndex = index;
                            }),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                CircleAvatar(
                                  radius: qrColorIndex == index ? 23 : 22,
                                  backgroundColor: qrColorIndex == index
                                      ? Colors.black
                                      : Colors.black26,
                                ),
                                CircleAvatar(
                                  radius: 20,
                                  backgroundColor: qrColors[index],
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                    const Text(
                      'Choose QR Background Color',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                    Expanded(
                      child: ListView.separated(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        separatorBuilder: (_, __) => const SizedBox(width: 8),
                        itemCount: qrBackgroundColors.length,
                        itemBuilder: (context, index) {
                          return InkWell(
                            hoverColor: Colors.transparent,
                            splashColor: Colors.transparent,
                            highlightColor: Colors.transparent,
                            onTap: () => setState(() {
                              qrBackgroundColorIndex = index;
                            }),
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                CircleAvatar(
                                  radius:
                                      qrBackgroundColorIndex == index ? 23 : 22,
                                  backgroundColor:
                                      qrBackgroundColorIndex == index
                                          ? Colors.black
                                          : Colors.black26,
                                ),
                                CircleAvatar(
                                  radius: 20,
                                  backgroundColor: qrBackgroundColors[index],
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

转到 web/index.html 文件,并将起始<html>标记内定义的尺寸更改为以下内容:

<html style="height: 350px; width: 650px">

扩展视图尺寸必须明确定义,上述尺寸应正确适应扩展 UI。

至此,您已成功创建 QR 码生成器扩展。运行相同的flutter build命令来重新生成 Flutter Web 文件:

flutter build web --web-renderer html --csp

按照我们之前讨论的相同步骤安装扩展。

呜呼!您的 QR 码生成器扩展程序已准备好使用。🎉

限制

尽管看起来令人兴奋,但也存在一定的局限性。

以下是我在探索如何使用 Flutter 构建 chrome 扩展时遇到的一些限制(其中一些可能是可以修复的,这需要更多的探索)。

1. 仅限于 HTML 渲染器

另一个让 QR 码生成器扩展更酷的附加功能是添加了“另存为图像”按钮。使用它,您可以将生成的二维码保存为普通图像文件。

但不幸的是,由于扩展不支持CanvasKit 渲染器,因此您不能toImage()在任何 RenderRepaintBoundary 对象上使用该方法(这是将任何 Flutter 小部件转换为图像格式所必需的)。

2. 无法使用 Firebase(应该可以)

如果您还记得,最初我们修改了index.html文件以删除大部分<script>标签。这是为了满足内容安全策略 (CSP) 规则。Manifest V3 不支持第三方 URL 的内联执行。

但是我尝试运行一个较旧的项目,该项目不使用 Flutter 中 Firebase 的仅 Dart 初始化(很可能应该解决它,因为在这种情况下您不需要在<script>标签内定义 Firebase 插件)。

3. 小部件状态丢失

这可能不被视为限制,而只是您在使用 Flutter 构建扩展时应牢记的一点。每当您在扩展视图之外单击以将其关闭时,您的所有应用程序状态都会丢失。

您应该使用 Flutter 插件在本地存储状态,例如shared_preferences插件(它工作正常,我已经在扩展中对其进行了测试)。

再见

希望你发现这篇文章很有趣。

Flutter 有很多独特的使用方式,人们找出在它们上运行 Flutter 的优化方式只是时间问题。

祝你在 Flutter 探索中好运!👍

 资料来源:https ://medium.com/flutter-community/building-a-chrome-extension-using-flutter-aeb100a6d6c

 #flutter #chrome 

What is GEEK

Buddha Community

使用 Flutter 构建 Chrome 扩展

Google's Flutter 1.20 stable announced with new features - Navoki

Flutter Google cross-platform UI framework has released a new version 1.20 stable.

Flutter is Google’s UI framework to make apps for Android, iOS, Web, Windows, Mac, Linux, and Fuchsia OS. Since the last 2 years, the flutter Framework has already achieved popularity among mobile developers to develop Android and iOS apps. In the last few releases, Flutter also added the support of making web applications and desktop applications.

Last month they introduced the support of the Linux desktop app that can be distributed through Canonical Snap Store(Snapcraft), this enables the developers to publish there Linux desktop app for their users and publish on Snap Store.  If you want to learn how to Publish Flutter Desktop app in Snap Store that here is the tutorial.

Flutter 1.20 Framework is built on Google’s made Dart programming language that is a cross-platform language providing native performance, new UI widgets, and other more features for the developer usage.

Here are the few key points of this release:

Performance improvements for Flutter and Dart

In this release, they have got multiple performance improvements in the Dart language itself. A new improvement is to reduce the app size in the release versions of the app. Another performance improvement is to reduce junk in the display of app animation by using the warm-up phase.

sksl_warm-up

If your app is junk information during the first run then the Skia Shading Language shader provides for pre-compilation as part of your app’s build. This can speed it up by more than 2x.

Added a better support of mouse cursors for web and desktop flutter app,. Now many widgets will show cursor on top of them or you can specify the type of supported cursor you want.

Autofill for mobile text fields

Autofill was already supported in native applications now its been added to the Flutter SDK. Now prefilled information stored by your OS can be used for autofill in the application. This feature will be available soon on the flutter web.

flutter_autofill

A new widget for interaction

InteractiveViewer is a new widget design for common interactions in your app like pan, zoom drag and drop for resizing the widget. Informations on this you can check more on this API documentation where you can try this widget on the DartPad. In this release, drag-drop has more features added like you can know precisely where the drop happened and get the position.

Updated Material Slider, RangeSlider, TimePicker, and DatePicker

In this new release, there are many pre-existing widgets that were updated to match the latest material guidelines, these updates include better interaction with Slider and RangeSliderDatePicker with support for date range and time picker with the new style.

flutter_DatePicker

New pubspec.yaml format

Other than these widget updates there is some update within the project also like in pubspec.yaml file format. If you are a flutter plugin publisher then your old pubspec.yaml  is no longer supported to publish a plugin as the older format does not specify for which platform plugin you are making. All existing plugin will continue to work with flutter apps but you should make a plugin update as soon as possible.

Preview of embedded Dart DevTools in Visual Studio Code

Visual Studio code flutter extension got an update in this release. You get a preview of new features where you can analyze that Dev tools in your coding workspace. Enable this feature in your vs code by _dart.previewEmbeddedDevTools_setting. Dart DevTools menu you can choose your favorite page embed on your code workspace.

Network tracking

The updated the Dev tools comes with the network page that enables network profiling. You can track the timings and other information like status and content type of your** network calls** within your app. You can also monitor gRPC traffic.

Generate type-safe platform channels for platform interop

Pigeon is a command-line tool that will generate types of safe platform channels without adding additional dependencies. With this instead of manually matching method strings on platform channel and serializing arguments, you can invoke native class and pass nonprimitive data objects by directly calling the Dartmethod.

There is still a long list of updates in the new version of Flutter 1.2 that we cannot cover in this blog. You can get more details you can visit the official site to know more. Also, you can subscribe to the Navoki newsletter to get updates on these features and upcoming new updates and lessons. In upcoming new versions, we might see more new features and improvements.

You can get more free Flutter tutorials you can follow these courses:

#dart #developers #flutter #app developed #dart devtools in visual studio code #firebase local emulator suite in flutter #flutter autofill #flutter date picker #flutter desktop linux app build and publish on snapcraft store #flutter pigeon #flutter range slider #flutter slider #flutter time picker #flutter tutorial #flutter widget #google flutter #linux #navoki #pubspec format #setup flutter desktop on windows

Terry  Tremblay

Terry Tremblay

1598396940

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking** Android and iOS** applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

flutter-mobile-desktop-web-embedded_min

Flutter was officially released in December 2018. Since then, it has gone a much stronger flutter community.

There has been much increase in flutter developers, flutter packages, youtube tutorials, blogs, flutter examples apps, official and private events, and more. Flutter is now on top software repos based and trending on GitHub.

Flutter meaning?

What is Flutter? this question comes to many new developer’s mind.

humming_bird_dart_flutter

Flutter means flying wings quickly, and lightly but obviously, this doesn’t apply in our SDK.

So Flutter was one of the companies that were acquired by **Google **for around $40 million. That company was based on providing gesture detection and recognition from a standard webcam. But later when the Flutter was going to release in alpha version for developer it’s name was Sky, but since Google already owned Flutter name, so they rename it to Flutter.

Where Flutter is used?

Flutter is used in many startup companies nowadays, and even some MNCs are also adopting Flutter as a mobile development framework. Many top famous companies are using their apps in Flutter. Some of them here are

Dream11

Dream11

NuBank

NuBank

Reflectly app

Reflectly app

Abbey Road Studios

Abbey Road Studios

and many more other apps. Mobile development companies also adopted Flutter as a service for their clients. Even I was one of them who developed flutter apps as a freelancer and later as an IT company for mobile apps.

Flutter as a service

#dart #flutter #uncategorized #flutter framework #flutter jobs #flutter language #flutter meaning #flutter meaning in hindi #google flutter #how does flutter work #what is flutter

Punith Raaj

1644991598

The Ultimate Guide To Tik Tok Clone App With Firebase - Ep 2

The Ultimate Guide To Tik Tok Clone App With Firebase - Ep 2
In this video, I'm going to show you how to make a Cool Tik Tok App a new Instagram using Flutter,firebase and visual studio code.

In this tutorial, you will learn how to Upload a Profile Pic to Firestore Data Storage.

🚀 Nice, clean and modern TikTok Clone #App #UI made in #Flutter⚠️

Starter Project : https://github.com/Punithraaj/Flutter_Tik_Tok_Clone_App/tree/Episode1

► Timestamps 
0:00 Intro 0:20 
Upload Profile Screen 
16:35 Image Picker
20:06 Image Cropper 
24:25 Firestore Data Storage Configuration.

⚠️ IMPORTANT: If you want to learn, I strongly advise you to watch the video at a slow speed and try to follow the code and understand what is done, without having to copy the code, and then download it from GitHub.

► Social Media 
GitHub: https://github.com/Punithraaj/Flutter_Tik_Tok_Clone_App.git
LinkedIn: https://www.linkedin.com/in/roaring-r...
Twitter: https://twitter.com/roaringraaj
Facebook: https://www.facebook.com/flutterdartacademy

► Previous Episode : https://youtu.be/QnL3fr-XpC4
► Playlist: https://youtube.com/playlist?list=PL6vcAuTKAaYe_9KQRsxTsFFSx78g1OluK

I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub!
⭐️ Thanks for watching the video and for more updates don't forget to click on the notification. 
⭐️Please comment your suggestion for my improvement. 
⭐️Remember to like, subscribe, share this video, and star the repo on Github :)

Hope you enjoyed this video!
If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj

LIKE & SHARE & ACTIVATE THE BELL Thanks For Watching :-)
 
https://youtu.be/F_GgZVD4sDk

#flutter tutorial - tiktok clone with firebase #flutter challenge @tiktokclone #fluttertutorial firebase #flutter firebase #flutter pageview #morioh #flutter

Punith Raaj

1640672627

Flutter Hotel Booking UI - Book your Stay At A New Hotel With Flutter - Ep1

https://youtu.be/-tHUmjIkGJ4
Flutter Hotel Booking UI - Book your Stay At A New Hotel With Flutter - Ep1
#flutter #fluttertravelapp #hotelbookingui #flutter ui design 

In this video, I'm going to show you how to make a Cool Hotel Booking App using Flutter and visual studio code. 

In this tutorial, you will learn how to create a Splash Screen and Introduction Screen, how to implement a SmoothPageIndicator in Flutter. 

🚀 Nice, clean and modern Hotel Booking #App #UI made in #Flutter 

⚠️ IMPORTANT: If you want to learn, I strongly advise you to watch the video at a slow speed and try to follow the code and understand what is done, without having to copy the code, and then download it from GitHub. 

► Social Media 

    GitHub: https://github.com/Punithraaj 

    LinkedIn: https://www.linkedin.com/in/roaring-r...

    Twitter: https://twitter.com/roaringraaj

    Facebook: https://www.facebook.com/flutterdartacademy

I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub! 

⭐️ Thanks for watching the video and for more updates don't forget to click on the notification.⭐️Please comment your suggestion for my improvement. ⭐️Remember to like, subscribe, share this video, and star the repo on Github :)Hope you enjoyed this video! If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj

#flutter riverpod #flutter travel app #appointment app flutter #morioh

Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens. Yes, you read it right, now you can make and export your favorite design in Adobe XD and export all the design in the widget form or as a full-screen design, this can save you a lot of time required in designing.

What we will do?
I will make a simple design of a dialogue box with a card design with text over it as shown below. After you complete this exercise you can experiment with the UI. You can make your own components or import UI kits available with the Adobe XD.

#developers #flutter #adobe xd design export to flutter #adobe xd flutter code #adobe xd flutter code generator - plugin #adobe xd flutter plugin #adobe xd flutter plugin tutorial #adobe xd plugins #adobe xd to flutter #adobe xd tutorial #codepen for flutter.