Using VideoElement and HTMLElementView …

Photo by Jakob Owens on Unsplash

When it comes to playing a video in flutter we often go for the very renowned package video_player, which is suitable for most of the cases.

But at present, this package comes with certain limitations. Since the flutter web platform does not support dart:io, due to which VideoPlayerController.file cannot be used. So we are only left with options to add our videos as an asset or upload them to a server before playing on the web using VideoPlayerController.asset and VideoPlayerController.network respectively.

Here is the good news! Flutter is a very powerful framework that gives us…


Hey, do your flutter form requires to add and remove TextFormFields dynamically? How many text editing controllers will you initialize at starting? How will you dispose these controllers properly when the field(s) got removed?

This article will help you with these problems.

Here, I’m revealing the secret for saving your time :-). All the dynamically added text fields will be a stateful widget in itself.

Now you can skip this article if you want.

Still Here? Want to see how I did this? Thanks!

Ok, first set up a project.

Our form will have a text field to input our…


Photo by Maddi Bazzocco on Unsplash

Hey, have you ever wanted a date-picker in your app but not in a dialog box? And you tried all the dart packages out there but cannot change their UIs as per your requirements? I had struck on these problems too! And came out with a solution to build a custom calendar and want to share it with you all :-)


Depiction of basic neomorphic effects

Neumorphism is a UI design pattern that basically revolves around shadows and gradients.

To apply shadows and gradients in Flutter, you can use boxShadow and gradient properties respectively of decoration in either Container or DecoratedBox widget.

Different Neumorphic Effects

Raised Effect

To create the raised effect

  • Apply black (dark) shadow to the right and bottom borders.
  • Apply white (light) shadow to the left and top borders.
BoxDecoration raised = BoxDecoration(  color: Colors.blueGrey[200],  boxShadow: [    BoxShadow(      color: Colors.black.withOpacity(0.2),      blurRadius: 3,      spreadRadius: 0,      offset: Offset(3, 3)   ),   BoxShadow(     color: Colors.white.withOpacity(0.5),     blurRadius: 3,     spreadRadius: 0,     offset: Offset(-3, -3)   ) ]);

Sunken Effect

To create a sunken effect just reverse…


This article will help if you want multi-language support for your flutter application. To reach out to many nations it is important that your application should support their native languages.

Using these steps your flutter app will change the texts according to the user’s device-locale.

Image by Tessa Kavanagh from Pixabay

STEP 1: Create supported languages JSON files

Create a folder named “assets” inside your project folder. Inside assets folder create another folder named “lang”.

Create locale JSON files for languages your app wants to support inside the “lang” folder (!important: name a file by its language-code).

Here I want my app to support English and Hindi Languages. …


This article will help, if you are developing a flutter application that needs to select the list items, like in a chat-app to delete the selected chats, or in a todo-app to remove or tick the selected todos.

Image displaying  the final application for selecting list items.
Image displaying  the final application for selecting list items.

STEP 1: Place your ListView inside a Stateful Widget

This step is although not necessary if you are using some state managements other than setState() like Bloc, or Provider.

I have chosen the setState() state management with Stateful Widget for simplicity.

class SelectListItem extends StatefulWidget{

@override

_SelectListItemState createState() => _SelectListItemState();

}

class _SelectListItemState extends State<SelectListItem>{

@override

Widget build(BuildContext context) {

return MaterialApp(

Hitesh Verma

Flutter Developer | New technology enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store