Flutter Neopop Package — 3D component library | Package for rendering 3D components in Flutter Apps

In this article we will discuss about how to add NeoPop Library to render 3d widgets in Flutter Apps.

🎥 Video Tutorial

🛠️ Dependencies

neopop | Flutter Package

🔭 Implementation

Let’s try to build up the UI as follows.,

→ Neopop Button

After adding the above dependency, First let’s create the below 3d Neopop button widget from Neopop package

NeoPopTiltedButton(
        isFloating: true,
        onTapUp: () => debugPrint('Play now'),
        decoration: const NeoPopTiltedButtonDecoration(
          color: Color(0xFFffe22d),
          plunkColor: Color(0xFFc3a13b),
          shadowColor: Colors.black,
        ),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15),
            child: Text('Play Now →',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 25,
                    fontWeight: FontWeight.bold)),
        ),
      );

The neopop widget also comes with list of arguments which we can configure based on our usecase. Including the tapUp, tapDowncall backs, Color, border etc.,

If we want to add shimmer effect to our Neopop button as shown below, We need to wrap the child component of Neopop button with NeoPopShimmer widget.

Therefore the above code can be updated as follows.,

NeoPopTiltedButton(
        isFloating: true,
        onTapUp: () => debugPrint('Play now'),
        decoration: const NeoPopTiltedButtonDecoration(
          color: Color(0xFFffe22d),
          plunkColor: Color(0xFFc3a13b),
          shadowColor: Colors.black,
        ),
        child: const NeoPopShimmer(
           shimmerColor: Colors.white,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 70.0, vertical: 15),
            child: Text('Play Now →',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 25,
                    fontWeight: FontWeight.bold)),
          ),
        ),
      );

Finally as a cherry on the cake! Let’s provide the background image to complete our desired UI.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/Images/bg_image.png"),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(50.0),
          child:
              Align(alignment: Alignment.bottomCenter, child: buildNeopopBtn()),
        ),
      ),
    );
  }

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=OoPiL40_UcI

Get the complete source code here:👉 https://github.com/vijayinyoutube/neopop_demo

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,