BOXD

boxd

AutoStory: Generating Diverse Storytelling Images with Minimal Effort: Conclusion and References

Creating Staggered Animation in Flutter: A Micro-Interactions Guide

ফ্লটারে স্তব্ধ অ্যানিমেশন তৈরি করা: একটি মাইক্রো-ইন্টার্যাকশন গাইড

Erstellen von gestaffelten Animationen in Flutter: Ein Leitfaden für Mikrointeraktionen

Creación de animaciones escalonadas en Flutter: una guía de microinteracciones

Création d'une animation échelonnée dans Flutter : un guide des micro-interactions

फ़्लटर में स्टैगर्ड एनीमेशन बनाना: एक माइक्रो-इंटरैक्शन गाइड

Flutter でスタッガードアニメーションを作成する: マイクロインタラクションガイド

Flutter에서 시차 애니메이션 만들기: 마이크로 상호작용 가이드

Criando animação escalonada no Flutter: um guia de microinterações

Создание шахматной анимации во Flutter: руководство по микровзаимодействиям

Flutter'da Aşamalı Animasyon Oluşturma: Mikro Etkileşimler Kılavuzu

Tạo hoạt ảnh so le trong Flutter: Hướng dẫn tương tác vi mô

在 Flutter 中创建交错动画：微交互指南

Everyone knows that good UI/UX is what differentiates an average app from a great app. A reliable way of improving the UX of your app is to use animations that grab the user’s attention without being obstructive or spammy. YouTube recently added an interaction to their subscribe button where the button’s border animates when the person in the video uses the word “Subscribe.” In this article, we will look at how we can build something similar for our buttons using . Flutter A little background If you aren’t already familiar with it, Flutter is a cross-platform UI framework that lets you easily build apps for multiple operating systems without having to write platform-specific code, and it is quickly becoming a go-to choice for many mobile app developers. The reason why we are focussing on this specific interaction is because it’s a really cool idea that seems obvious now if you think about it. One of the problems that YouTube has is that a lot of people watch content without subscribing to the content creator, which, in turn, affects the quality and consistency of content that the creator creates. The issue was not that viewers did not want to subscribe but maybe just forgot to after watching the video, or it didn’t occur to them to subscribe while watching. By animating the button, you quickly grab the user’s attention and highlight your call to action without resorting to in-video popups or full-screen call-to-action screens. The same concept can apply to other mobile apps, often you have a call to action you want user’s to use in the middle of your screen along with other content and often this gets missed. This button animation would be a nice way to make users see the CTA and highlight an interaction you want them to make. For example, you could highlight a “See more” CTA for some premium content as the user scrolls past that section. Setting up the basics Let’s start by setting up the subscribe button: class SubscribeButton extends StatefulWidget {
  const SubscribeButton({super.key});

  @override
  State<SubscribeButton> createState() => _SubscribeButtonState();
}

class _SubscribeButtonState extends State<SubscribeButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      alignment: Alignment.center,
      width: 140,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.white,
      ),
      child: const Text(
        "Subscribe",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 18,
          color: Colors.black,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
} The code is rather straightforward, so I won’t walk you through it, although one thing to note is that this is a Stateful Widget because we eventually plan to use animations in it. The code above will render something like this: An overview of the interaction Now that we have our button, let’s talk about what we plan to do to set up the animation. The animation seems rather simple, on YouTube the buttons border animates itself from left to right with some color. The trick here is that its not animating the entire border together, it appears as if something is moving from left to right behind the button. And that is the key to understanding how to build this. We want it to seem like something behind the button is moving, so that is exactly what we will do! We will add an element behind the button, which is slightly larger than it, and animate its position to go from left to right. Simple now that you think about it, right? Second let’s talk about details, we want the animation to be quick so it does not look sluggish but also slow enough that people notice it. In this example, I’ve chosen 500ms as the duration, but you can play around with that for your own use cases. The actual interaction on YouTube uses a gradient for the color, to keep things simple I’m using solid red in this example. Using AnimationController to animate the button’s border Let’s start with adding the AnimationController and Tween to our button. If you are not familiar with these, I recommend going through their documentation before reading further: , . AnimationController Tween class _SubscribeButtonState extends State<SubscribeButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
} The AnimationController is what we will use to start the animation; it simply moves an animation value in the forward or reverse direction. We combine that with Tween to then generate values based on the progress of the animation. Notice that we use in our State class now because animations require the implementing class to support Tickers, which ensures that the widget notifies the animation of frame changes, making it run smoothly at 60fps. Read about more if you’re curious about this. SingleTickerProviderStateMixin TickerProvider Let’s continue and add the highlight around the button: @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 150,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
      ),
      clipBehavior: Clip.hardEdge,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            left: 0,
            child: Container(
              height: 50,
              width: 25,
              color: Colors.red,
            ),
          ),
          renderSubscribeButton(),
        ],
      ),
    );
  } The idea here is that we have a container around the button and then add a sibling to the button, which will act as the moving widget behind it. Also, to keep things more organized, I moved the button itself to a separate function: Widget renderSubscribeButton() {
    return GestureDetector(
      onTap: () {
        _controller.reset();
        _controller.forward();
      },
      child: Container(
        height: 40,
        alignment: Alignment.center,
        width: 140,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),
          color: Colors.white,
        ),
        child: const Text(
          "Subscribe",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 18,
            color: Colors.black,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  } Notice that I’ve wrapped the button with a GestureDetector so that we can start the animation when we tap it. This is just for the sake of this example, and you can choose any other event you prefer for your use case. The button should now look like this: The widget in red is what we will be animating from left to right to make it appear as if the border is being animated. Now, let’s talk about a few minor details before we hook up the animation. The idea here is that we will modify the property of the widget to animate the position of the red widget. The width of the button is 150, and the width of the red widget is 25, so we need to move the widget from -25 to 175 ( ). So we need to do the following: left Positioned 0–25 to 150+25 Modify the Tween to use the as the starting position and as the end. -25 175 Modify the Positioned widget to use the animation value as the value left late double highlightWidth = 25;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  );
  _animation = Tween<double>(begin: 0 - highlightWidth, end: 150 + highlightWidth).animate(_controller)
    ..addListener(() {
      setState(() {});
    });
} I created a variable to make it easier to play around with the width of the red widget. highlightWidth Positioned(
  left: _animation.value,
  child: Container(
    height: 50,
    width: highlightWidth,
    color: Colors.red,
  ),
), will output the value of the Tween as the animation progresses, and because we call whenever the animation value is updated, the UI will reflect this as well. This is how the interaction looks now: _animation.value setState And that’s it! We now have a border animating behind the button on demand. You can play around with the color of the red widget, its width, the animation duration, etc, to give you the exact interaction you need. Things to keep in mind Interactions like this are best suited for small buttons on your screen; full-width buttons grab enough attention by themselves, and adding this interaction to that might make it annoying for users. Do not overuse this animation in your app; use it on some of the most important CTAs in your app only. Thanks for reading! If you like this article, be sure to check out my other work. Also, it always helps if you share this with other people. You can find me on: Twitter Github If you are looking to hire a freelance mobile developer, reach out on: Upwork Fiverr Contra

Creating the YouTube Subscribe Button Animation in Flutter

.box is bridging Web3 and Web2 TORONTO, Ontario, January 18th, 2024/Chainwire/-- Breaking new ground in the domain name industry, My.box Inc. announces the upcoming launch of its Public Beta on January 18th, 2024 at 12:00 PM ET. This kicks off public availability of the first ever domain name system supported natively by browsers, email, and wallets. The Future Of Digital Identity .box domains offer secure and seamless identity on Web3 and Web2. The holder of ‘example.box’ is empowered with decentralized ownership and access to DNS record management, ENS integration, payments, Web3 authentication, Web3 messaging, websites, and email. Founder of .box, Josh Brandley states, “There are many great things happening at the intersection of Web3, decentralized identity, and domain names – we are the first to tie it all together with a powerful, easy to use product”. .box solves the major problem with blockchain domains .box sets a new standard in the world of blockchain-based top-level domains. While other new blockchain domain systems generate excitement, they ultimately fall short because they do not work with traditional browsers and email services. In contrast, .box is ICANN-accredited, recognized by the global Domain Name System (DNS), and supported by the Ethereum Name Service (ENS). Both DNS and ENS have established substantial network effects, solidifying their positions as core infrastructure. .box is pioneering an approach that natively integrates the features of both systems, thus delivering a better experience for users. The Team Behind .box The .box TLD is owned and operated by Intercap Registry, an ICANN Accredited Registry Operator. Intercap has dedicated over a decade to the development of .box. Core partners include 3DNS and ENS Labs, whose leaders share the vision of bringing the benefits of Web3 to the domain industry. Nick Johnson, Founder of ENS, states: “We have always had a deep respect for the DNS and are very excited to witness this unique .box implementation that supports seamless interoperability between the two systems”. Paul Gauvreau, CEO of 3DNS adds, “Bringing real world domain assets onchain improves almost every use case there is – we anticipate that this product will be widely adopted by Web3 enthusiasts and newcomers alike.” Launch Pricing During launch, .box domains will run through a premium pricing phase, ensuring fair access for everyone. Prices start at $7,680 USDC and then decay exponentially for 6 days until stopping at a fixed rate of $120 USDC. All domains will renew at $120 USDC per year. Domains are minted and managed using the dApp hosted at my.box. Payment is made with ETH or USDC. Join the .box community Secure your .box domain now at http://www.my.box Follow .box at https://x.com/boxdomains Join the .box to: Discord server Learn how to buy a .box and take control of your decentralized identity. Qualify for your referral link to earn $18 for each successful referral. Receive support, updates, and connect with the team. For More Information: Visit our website at  __ __or contact Omar Hamed, omar@intercap.com http://www.my.box Contact Community Manager Omar Hamed My.box contact@omar.box This story was distributed as a release by Chainwire under HackerNoon’s Business Blogging Program. Learn more about the program here.

Introducing .box – The World’s First Blockchain Native DNS Routable Domain

In this article, we will be building the Threads UI using Flutter. You can find a video below with my step-by-step process. youtube https://youtu.be/nXbLgN6LwSI Results 😀 files inside lib in order to use images create asset folder inside the project and add the images below are the images that you have to add in asset folder img1 img2 img3 img4 img5 img6 img7 img8 img9 Let’s dive straight into the code. pubspec.yaml name: testapp
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: "none" # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: ">=2.19.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  animated_notch_bottom_bar: ^1.0.0
  buttons_tabbar: ^1.3.6

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages main.dart import 'package:flutter/material.dart';
import 'package:testapp/landing_page.dart';

import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: LandingPage(),
    );
  }
} landing_page.dart import 'package:flutter/material.dart';
import 'package:testapp/home_page.dart';

class LandingPage extends StatefulWidget {
  const LandingPage({super.key});

  @override
  State<LandingPage> createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Column(
        children: [
          Image.asset(
            'assets/img1.png',
            height: height * 0.75,
            width: width,
          ),
          SizedBox(
            height: 20,
          ),
          InkWell(
            onTap: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => HomePage()));
            },
            child: Container(
              padding: EdgeInsets.all(20),
              height: 78,
              width: 380,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Log In With Instagram',
                        style: TextStyle(
                          color: Colors.black54,
                        ),
                      ),
                      Row(
                        children: [
                          Text(
                            'zuck',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(
                            width: 5,
                          ),
                          Image.asset(
                            'assets/img2.png',
                            height: 13,
                            width: 13,
                          ),
                        ],
                      ),
                    ],
                  ),
                  Image.asset('assets/img3.png'),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Center(
            child: Text(
              'Switch Account',
              style: TextStyle(
                color: Colors.black38,
              ),
            ),
          ),
        ],
      ),
    );
  }
} home_page.dart import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: height * 0.8,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/img4.png"),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    padding: EdgeInsets.all(20),
                    height: 250,
                    width: 329,
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                CircleAvatar(
                                  backgroundImage:
                                      AssetImage('assets/img5.jpg'),
                                ),
                                SizedBox(
                                  width: 15,
                                ),
                                Text(
                                  'zuck',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                SizedBox(
                                  width: 5,
                                ),
                                Image.asset(
                                  'assets/img2.png',
                                  height: 13,
                                  width: 13,
                                ),
                              ],
                            ),
                            Image.asset(
                              'assets/img6.png',
                              height: 20,
                              width: 20,
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Row(
                          children: [
                            SizedBox(
                              width: 8,
                            ),
                            Container(
                              height: 110,
                              child: VerticalDivider(
                                color: Colors.black38,
                                thickness: 1,
                              ),
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('Let\'s do this. Welcome to Threads. 🔥'),
                                SizedBox(
                                  width: width * 0.6,
                                  child: Text(
                                    'The visison for Threads is to create an open and friendly public space for conversation.',
                                    style: TextStyle(),
                                  ),
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                Row(
                                  children: [
                                    IconButton(
                                      onPressed: () {},
                                      icon: Icon(
                                        Icons.favorite_border,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {},
                                      icon: ImageIcon(
                                        AssetImage("assets/img9.png"),
                                        size: 24,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {},
                                      icon: ImageIcon(
                                        AssetImage("assets/img7.png"),
                                        size: 24,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {},
                                      icon: ImageIcon(
                                        AssetImage("assets/img8.png"),
                                        size: 24,
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Text(
                  'via Threads',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Flutter Project: Building the Threads UI Using Flutter

Building a Travel Mobile App using Flutter

About 2 years ago, I created a sample card widget for a web dashboard with . I was inspired by the source code on . Now, I want to recreate it with Flutter code. Since it’s made for web UI, the style uses CSS code. In the original source, the creator uses a negative margin for the icon box. React JS Codepen .card
    margin: 0 -8px 32px -8px
    color: rgba(0,0,0,.87)
    box-shadow: 2px 2px 8px rgba(0,0,0,.05) I’ve recreated a similar card according to my dashboard needs with React JS. I use an absolute position and a negative value in the property. top Look at the icons stacked on top of the cards. boxicon: {
    position: "absolute",
    zIndex: 1,
    top: -20,
    left: 12,
} How about in Flutter? In Flutter, we can use on some of the widgets. For example, Container, Card, etc. And the property is implementing the . This class is also used to set padding in Flutter. margin margin class EdgeInsetsGeometry How we use padding and margin in Flutter: Container(
   padding: EdgeInsets.all(8),
   margin: EdgeInsets.fromLRTB(4,8,4,2)
) EdgeInsetsGeometry in , has an method. So…. Flutter isNonNegative Margin values must be positive, we cannot assign negative values to EdgeInsetsGeometry. We will receive a when we provide negative values to the or properties. failed assertion margins padding ════════ Exception caught by widgets library ════════
The following assertion was thrown building Card(dirty, dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#95d0d]]):
'package:flutter/src/widgets/container.dart': Failed assertion: line 267 pos 15: 'margin == null || margin.isNonNegative': is not true. To create the card widget, we can make a similar behavior, or create a similar shape. Here are several ways to achieve this: Positioned widget | In CSS if you know about . In Flutter we can achieve similar behavior with the Positioned widget. position: absolute Transform widget | This is similar to the transform property in CSS. It applies a transformation before the widget is rendered. CustomPainter | I haven’t tried this, but I think it’s possible to create a custom shape like the card above with the CustomPainter class. In this article, I will use the Transform class to crate card widgets like the image above. Since a negative margin can’t be applied, we will move the icon widget with matrix translation from the class. Transform Matrix translation: A without changing its size, shape, or orientation… [ ] type of transformation that occurs when a figure is moved from one location to another on the coordinate plane ref With matrix translation, we can move widgets without changing anything except their position. We can prove it by comparing the position of the widget’s coordinates. If you wonder how to get the coordinate of a widget, you can try with extension method . globalPaintBound Read my article about it here: https://medium.easyread.co/how-to-get-widget-coordinates-in-flutter-ui-dart-extension-4-d59dc15a9e3f?embedable=true Making cards Before we apply the transformation widget, let's create the initial card. . (See the picture before translation) Now we want to place the icon staked above the card. We will use matrix translation. To add the translation, there are 2 options. If the widget parent is not a Container widget, you can wrap them with the widget. Transfrom For example: Transform(
  transform: Matrix4.translationValues(x, y, z),
  child: const SomeWidget(),
) If it's a Container, then we can assign it directly to the transform property: Container(
  transform: Matrix4.translationValues(x, y, z),
  .....// other props
) After adding the translation value to the icon widget, now we have a stacked Icon on the card widget ( . See the picture after translation) Additional: Neumorphism widget We have done with the shape of the card widget. But if we compare the current result, we missed the shadow. To add the effect shadow we can add it manually to the property from the Container widget. BoxDecoration We also can use an extension method named . addNeumorphism Manual shadow for the icon box Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      boxShadow: const [
        BoxShadow(
          offset: Offset(3, 3),
          blurRadius: 8,
          color: Color(0xFFffa726),
        ),
        BoxShadow(
          offset: Offset(-1, -1),
          blurRadius: 10,
          color: Colors.white,
        ),
.... Use the extension method neumorphism @override
Widget build(BuildContext context) {
  return Container(
  ..../// rest of code
  ).addNeumorphism(
      bottomShadowColor: Colors.black26,
); And now we have a better card with the implemented shadow effect: Finishing Up The final step we need to do is to create a responsive layout on the card widget. I’ve also shared an article about responsive layouts in Flutter. For more details, you can read it here: https://hackernoon.com/creating-responsive-flutter-app-layouts-for-all-screen-sizes?embedable=true Cards will be displayed with the widget. Then we apply the responsive method to determine the , and the value. GridView.count() crossAxisCount childAspectRatio ...
body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: GridView.count(
    crossAxisSpacing: 20,
    // mainAxisSpacing: 20,
    childAspectRatio: size.width /
        size.height /
        context.responsive(0.3,
            md: 0.6,
            lg: 0.59,
            xl: 1.2), // this ratio is hard code, you may need to change it base on your need
    crossAxisCount: context.responsive(1, md: 2, xl: 4),
    children: widge,
  ),
),
... And finally, we have a card widget with stacked icons written in Flutter code. Full code and demo can be found on Dartpad: https://dartpad.dev/?id=be8f84a08f9e2347f20be108ac030484 Thank you for reading! Also published here.

How to Create the Negative Margin Effect in Flutter

ChatGPT (Generative Pre-trained Transformer) is a chatbot launched by OpenAI in November 2022. It is built on top of OpenAI’s GPT-3.5 family of large language models and is fine-tuned with both supervised and reinforcement learning techniques. ChatGPT was launched as a prototype on November 30 2022 and quickly gained attention for its detailed responses and articulate answers across many domains of knowledge. However, its uneven factual accuracy was identified as a significant drawback. In this article, we’ll learn how to use the OpenAI API to build a ChatGPT application on Flutter. Building this application we’ll need the following: API token: We will need an API token from OpenAI, you can get your API token from the OpenAI account dashboard. If you don't have an account you can create one. : http flutter package for handling http requests. http : The Provider package is an easy-to-use package that is basically a wrapper around that makes it easy to use and manage. It provides a state management technique that is used to manage a piece of data around the app. provider inheritedwidget animated text kit: a flutter package that contains a collection of cool text animations. : An SVG rendering and widget library for flutter, which allows planting and displaying Scalable Vector Graphic files. flutter_svg With all things set, let's start building. 🍾 🍻 Open your terminal and create your flutter app using flutter cli flutter create openai-chat When the app has been created, open the folder in your VSCode or whatever Text Editor you make use of. Open the folder and open the file, clear out the initial code that was created with the app - because we are going to start building our app from the ground up. lib main Your file will now look like this by creating a main.dart Stateful Widget: import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
        title: "Open AI Chat",
        home: SafeArea(
          bottom: true,
          top: false,
          child: Scaffold(
             backgroundColor: const Color(0xff343541),
             appBar: AppBar(
              backgroundColor: const Color(0xff343541),
              leading: IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.menu,
                color: Color(0xffd1d5db),
              ),
            ),
            elevation: 0,
            title: const Text("New Chat"),
            centerTitle: true,
            actions: [
              IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.add,
                  color: Color(0xffd1d5db),
                ),
              ),
            ],
            ),
          body: Stack(
                    [],
            ),
          ),
        ), 
    );
  }
} Now that we have our app set up, we can start building all the different widgets. We aiming for four (4) different widgets: User Input Widget User message Widget AI Message Widget Loader Widget Create a folder called this will contain all four widgets that we will work on soon. widgets, User Input Widget import 'package:flutter/material.dart';

class UserInput extends StatelessWidget {
  final TextEditingController chatcontroller;
  const UserInput({
    Key? key,
    required this.chatcontroller,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        padding: const EdgeInsets.only(
          top: 10,
          bottom: 10,
          left: 5,
          right: 5,
        ),
        decoration: const BoxDecoration(
          color: Color(0xff444654),
          border: Border(
            top: BorderSide(
              color: Color(0xffd1d5db),
              width: 0.5,
            ),
          ),
        ),
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: Image.asset(
                "images/avatar.png",
                height: 40,
              ),
            ),
            Expanded(
              flex: 5,
              child: TextFormField(
                onFieldSubmitted: (e) {
                  
                },
                controller: chatcontroller,
                style: const TextStyle(
                  color: Colors.white,
                ),
                decoration: const InputDecoration(
                  focusColor: Colors.white,
                  filled: true,
                  fillColor: Color(0xff343541),
                  suffixIcon: Icon(
                    Icons.send,
                    color: Color(0xffacacbe),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.all(
                      Radius.circular(5.0),
                    ),
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(5.0),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
} The accepts one parameter, the . We also we have the callback method that will come into player when the user submits their message. UserInput chatcontroller onFieldSubmitted User Message Widget class UserMessage extends StatelessWidget {
  final String text;
  const UserMessage({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset(
                "images/avatar.png",
                height: 40,
                width: 40,
                fit: BoxFit.contain,
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 3,
                top: 8,
              ),
              child: Text(
                text,
                style: const TextStyle(
                  color: Color(0xffd1d5db),
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
} The user message passes the user’s message as a parameter to the class which will be appended to the ListView. Usermessage AI Message Widget class AiMessage extends StatelessWidget {
  final String text;
  const AiMessage({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xff444654),
      padding: const EdgeInsets.all(8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                color: const Color(0xff0fa37f),
                padding: const EdgeInsets.all(3),
                child: SvgPicture.asset(
                  "images/ai-avatar.svg",
                  height: 30,
                  width: 30,
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: AnimatedTextKit(
              animatedTexts: [
                TypewriterAnimatedText(
                  text,
                  textStyle: const TextStyle(
                    color: Color(0xffd1d5db),
                    fontSize: 16,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
              totalRepeatCount: 1,
            ),
          ),
        ],
      ),
    );
  }
} The AI message passes the user message as a parameter to the class which will be appended to the ListView. AiMessage Using the we can animate our text using the typewriter animation. AnimatedTextKit package Loader Widget class Loading extends StatelessWidget {
  final String text;
  const Loading({
    Key? key,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xff444654),
      padding: const EdgeInsets.all(8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                color: const Color(0xff0fa37f),
                padding: const EdgeInsets.all(3),
                child: SvgPicture.asset(
                  "images/ai-avatar.svg",
                  height: 30,
                  width: 30,
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Text(
              text,
              style: const TextStyle(
                color: Color(0xffd1d5db),
                fontSize: 16,
                fontWeight: FontWeight.w700,
              ),
            ),
          ),
        ],
      ),
    );
  }
} The Loader Widget is used to await a response from the API call, then the response is completed we remove the loader from the list. APP Constant const endpoint = "https://api.openai.com/v1/";
const aiToken = "sk-------------------------------------"; Create a file called this will contain our endpoint and API token, you can get your API token from OpenAI’s API token dashboard. api_constants.dart OpenAI Repository class OpenAiRepository {
  static var client = http.Client();

  static Future<Map<String, dynamic>> sendMessage({required prompt}) async {
    try {
      var headers = {
        'Authorization': 'Bearer $aiToken',
        'Content-Type': 'application/json'
      };
      var request = http.Request('POST', Uri.parse('${endpoint}completions'));
      request.body = json.encode({
        "model": "text-davinci-003",
        "prompt": prompt,
        "temperature": 0,
        "max_tokens": 2000
      });
      request.headers.addAll(headers);

      http.StreamedResponse response = await request.send();
      if (response.statusCode == 200) {
        final data = await response.stream.bytesToString();

        return json.decode(data);
      } else {
        return {
          "status": false,
          "message": "Oops, there was an error",
        };
      }
    } catch (_) {
      return {
        "status": false,
        "message": "Oops, there was an error",
      };
    }
  }
} Now, let’s communicate with the OpenAI API. We have to create a file called in the repository folder. In the file, we have a class called OpenAIRepository which has a static method called sendMessage that accepts just a single parameter openai_repository.dart prompt Authentication The OpenAI API uses API keys for authentication. Retrieve the API key you’ll use in your requests. All API requests should include your API key in an HTTP header as follows: Authorization Authorization: Bearer YOUR_API_KEY Making Request {
  "model": "text-davinci-003",
  "prompt": prompt,
  "temperature": 0,
  "max_tokens": 2000
} This request queries the Davinci model to complete the text starting with a prompt you sent from your user input. The parameter sets an upper bound on how many tokens the API will return. The means the model will take more risks. Try 0.9 for more creative applications, and 0 for ones with a well-defined answer. max_tokens temperature This will return a response that looks like this. Map<String, dynamic> {
    "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR",
    "object": "text_completion",
    "created": 1586839808,
    "model": "text-davinci:003",
    "choices": [
        {
            "text": "\n\nThis is indeed a test",
            "index": 0,
            "logprobs": null,
            "finish_reason": "length"
        }
    ],
    "usage": {
        "prompt_tokens": 5,
        "completion_tokens": 7,
        "total_tokens": 12
    }
} ChatModel class ChatModel extends ChangeNotifier {
  List<Widget> messages = [];

  List<Widget> get getMessages => messages;

  Future<void> sendChat(String txt) async {
    addUserMessage(txt);

    Map<String, dynamic> response =
        await OpenAiRepository.sendMessage(prompt: txt);
    String text = response['choices'][0]['text'];
    //remove the last item
    messages.removeLast();
    messages.add(AiMessage(text: text));

    notifyListeners();
  }

  void addUserMessage(txt) {
    messages.add(UserMessage(text: txt));
    messages.add(const Loading(text: "..."));
    notifyListeners();
  }
} Since we are using provider as our State management, we create a class called which extends the We make an empty List<Widget> which we will use to push in new messages (Widget). A to get messages, ChatModel ChangeNotifier. getter getMessages We create a method called sendChat which takes the user input and then calls the which pushes a new widget containing the user message and also the loader widget to the messages list. addUserMessage Next, we send the prompt message to the OpenAI Repository which then sends back a response. We then store the text into a variable called String text. Next, we remove the Loader Widget from the List and add the AIMessage Widget 🤞🏽 Almost done… We have to go back to our userInput Widget and call when the user tries to submit his message. Your code will look much like this now. sendChat TextFormField(
  onFieldSubmitted: (e) {
    context.read<ChatModel>().sendChat(e);
    chatcontroller.clear();
  }, 🚀 Hit it All have to do now, is to edit our file. Wrap the body in and your code will look something like this. main.dart MultiProvider body: MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => ChatModel()),
  ],
  child: Consumer<ChatModel>(builder: (context, model, child) {
    List<Widget> messages = model.getMessages;
    return Stack(
      children: [
        //chat

        Container(
          margin: const EdgeInsets.only(bottom: 80),
          child: ListView(
            children: [
              const Divider(
                color: Color(0xffd1d5db),
              ),
              for (int i = 0; i < messages.length; i++) messages[i]
            ],
          ),
        ),
        //input
        UserInput(
          chatcontroller: chatcontroller,
        )
      ],
    );
  }),
), 🛸🚁 App Running All done, you can start using the ChatGPT on your Flutter App. You can also clone the repo right . here Also published . here Have any questions, drop your comment here and I will respond to them as soon as possible.

Building a ChatGPT Clone on Flutter With the OpenAI API

Introducing Nanc: A Backend-Agnostic CMS Perfect for Flutter Apps

ন্যান্সের সাথে পরিচয়: ফ্লটার অ্যাপের জন্য পারফেক্ট একটি ব্যাকএন্ড-অ্যাগনস্টিক সিএমএস

Wir stellen vor: Nanc: Ein Backend-unabhängiges CMS, perfekt für Flutter-Apps

Presentamos Nanc: un CMS independiente del backend perfecto para aplicaciones Flutter

Présentation de Nanc : un CMS indépendant du backend, parfait pour les applications Flutter

नैनक का परिचय: स्पंदन ऐप्स के लिए एक बैकएंड-एग्नोस्टिक सीएमएस परफेक्ट

Nanc の紹介: Flutter アプリに最適なバックエンドに依存しない CMS

Nanc 소개: Flutter 앱에 완벽한 백엔드 독립적 CMS

Apresentando o Nanc: um CMS independente de back-end perfeito para aplicativos Flutter

Nanc ile Tanışın: Flutter Uygulamaları için Mükemmel Bir Arka Uçtan Bağımsız CMS

Giới thiệu Nanc: Một CMS phụ trợ hoàn hảo cho các ứng dụng Flutter

介绍 Nanc：后端不可知的 CMS，非常适合 Flutter 应用程序

Using Quickblox for Adding a Facebook-like React-to-Message Feature in Your Flutter App

Stories, News & Mentions about BOXD

Boxd’s Stories on HackerNoon