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

Vijay R
vijaycreations
Published in
4 min readMay 21, 2023

--

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

🎥 Video Tutorial

🛠️ Dependencies

🔭 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.,👇

--

--

Vijay R
vijaycreations

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: calico.takeoff_01@icloud.com