A simple developer's journey

  👉🏻Introduction Recently, I had the opportunity to work on a mobile application project built for Android using a React-based stack powered by Vite . While my background is primarily focused on Flutter for mobile development, this project pushed me outside of my usual technical comfort zone. Exploring a React-centric approach for mobile delivery was both a challenge and a valuable learning experience :  The application itself remained intentionally lightweight, but it opened the door to new architectural patterns, tooling, and development workflows I used React  hybrid  JavaScript  framework 👉🏻The application [Yocable] The application is designed to strengthen language learning by focusing specifically on vocabulary acquisition. It supports learning across a wide range of languages, with approximately ten languages available. An advanced learning algorithm dynamically emphasizes words that are harder for the user to retain, ensuring more efficient memoriz...

When you design a mobile application, at some point, you will always need to propose the user a way to contact your or your support team. You can use different services or back-end, the most easy and fast way to achieve this functionality is to propose to the user to send you directly an email. Here are the steps to send an email. 1. Add package url_launcher In your yaml file: dependencies:   url_launcher: ^6.1.9 2. Use a correctly formatted link to send email In your controller, format your address like that, providing: - the recipient email address - and optionally a subject and a body    mailto :target@example.com? subject =Sujet& body =Contenu   3. Sample code import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; class EmailExample extends StatelessWidget { final String email = 'destinataire@example.com'; final String subject = 'Mon Sujet Pré-rempli'; final String body = 'Bonjour, voici un exempl...

  [SocialCut] Released on Google Play Store ! Hello guys, today, just an announcement to inform you that SocialCut has been released and is now available for everybody ! 📱 Download SocialCut On Google Play Store 🧑🏻‍🎨 SocialCut is the ideal tool for: digital content creator community manager, digital artist influencer digital media manager , freelance developer, or simply a daily picture user 💡 And remember that SocialCut is available in the following languages: - English, Spanish, French, Chinese (simplified), Japanese  

[SocialCut] for Android, really nice picture application! Hello programmers, Just a few words to present you a new application that will be released soon. And you can get it for free if you pre-register on the Play Store! SocialCut Android app lets you crop your pictures in a few clicks to fit & publish it to your favorite social network! A lot of cut templates are already available, you just have to choose one then adjust the picture position => cut it as you see it. You can check SocialCut's Instagram account to see a few examples of cut pictures ( @ig: socialcut.app ). ___ 🚨 SocialCut is still in 'pre-registration' stage! Register to get the fully functionnal app for free 💲 when it will be released (*soon)!🚨 Get it on the Play store: https://play.google.com/store/apps/details?id=com.djooleean.socialcut Or official website: https://socialcut.app Let me your comments, and enjoy! Best regards, SocialCut on Youtube

  [Flutter Tips] Remove the "DEBUG" banner of your Flutter app When you start coding a new application with Flutter, you  will surely see a banner with "Debug" text displayed on the top right corner of your app. To remove it, you will need to set the debugShowCheckedModeBanner property of the MaterialApp (or CupertinoApp ) widget to false . 🟢Here’s an example on how to do it: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner : false, // This removes the debug banner home: Scaffold( appBar: AppBar( title: Text('No Debug Banner'), ), body: Center( child: Text('Hello, World!'), ), ), ); } } > debugShowCheckedModeBanner: false : This line ensures that the debug ban...

FlutterFlow, new AI capabilities summary Hello guys, if you are developing mobile apps, you may already know about FlutterFlow framework. FlutterFlow is a user-friendly, no-code platform that allows you to build beautiful, fully-functional mobile applications without needing to write a single line of code. It's like a visual app builder where you can drag and drop various components, design your app's interface, and connect it to a backend, all within an intuitive graphical interface. 🤓New AI capabilities Since recently, AI capabilities have been added to the framework in order to simplify the design process and to gain more time. Here are some key features: AI Page Generation: FlutterFlow can generate entire app pages from simple prompts, significantly reducing development time AI Component Generation: This feature creates detailed UI components based on user descriptions, which can be customized to fit the app’s design requirements. AI Schema Generation : Automatically g...

  If sometimes you get crazy trying to test your Flutter application on different devices, like on an iPhone or any other Android devices, I have a pretty simple and convenient way to figure it out ! Use the following package, there are many options that will make you gain a lot of time! Like choosing between all different kind of devices, setting dark or light theme dynamically and much more.You should give a try to the following package:  Package on pub.dev : device_preview https://pub.dev/packages/device_preview Enjoy!

If you like me, are coding generally in C# or other Camel case based programming language and start to  code in Flutter / Dart, you will always see a warning like this:   The variable name 'xxxx' isn't a lowerCamelCase identifier. Try changing the name to follow the lowerCamelCase style. To solve that, you can add a specific comment at the begining of each file where you have this issue. But maybe the most interesting thing for you is to do it only once in your whole project. For that, you have to edit the following file: analysis_options.yaml Add the following statements:  non_constant_identifier_names: ignore # This file configures the analyzer, which statically analyzes Dart code to # check for errors, warnings, and lints. include: package:flutter_lints/flutter.yaml linter: rules: # avoid_print: false # Uncomment to disable the `avoid_print` rule # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule # Disable the non_con...

There are many ways to add a background image to your pages, but the most common way is to use a BoxDecoration Widget. The BoxDecoration Widget is placed under a parent Container Widget (container.decoration). Then, you can customise the Image decoration using Assets images, Network images... Sample code (with an asset image): @ override Widget build ( BuildContext context ) { return GetBuilder < MainPageController >( id : 'mainpage' , init : MainPageController (), builder : ( vm ) => Scaffold ( body : Container ( width : double . infinity , height : double . infinity , decoration : const BoxDecoration ( image : DecorationImage ( image : AssetImage ( 'assets/images/dark_background2.jpg' ), fit : BoxFit . fill , )), child : SafeArea ( top : true , bottom : true , child : Container (

I'm sure, if you are a Flutter's developer, that you will need one day to get specific paths, for instance to store files, generate temporary files etc... Path_provider package For that I use the 'path_provider' package that has some helpers methods. For example: Future < Directory >   getApplicationDocumentsDirectory ( ) returns the documents directory. How to use it ? Directory tempDir = await getTemporaryDirectory(); String tempPath = tempDir.path; Directory appDocDir = await getApplicationDocumentsDirectory(); String appDocPath = appDocDir.path; Follow the links: Package:  https://pub.dev/packages/path_provider Package's documentation:  https://pub.dev/documentation/path_provider/latest/index.html

As applications are actually spread around the world, a common task to implement when developing your app (mobile, web or desktop), is to setup a multi-language option .  In Flutter, it can be done easily with the GetX Package (a useful package that provides a lot more services ! You should take a look if you don't know this package:  GetX package on pub.dev . The implementation steps are the following: 1-Add GetX package to your solution You can do it the traditional way you like. For instance with "Pub Assist" extension: Shift+CMD+P > Pub asssist: add/upgrade > get 2-Use a GetMaterialApp Important step, do not forget to use the GetMaterialApp classe instead of Flutter's MaterialApp: @ override Widget build ( BuildContext context ) { return GetMaterialApp ( 3-Add a translation file Next you have to add a class that will embed all your strings declaration / translations. This class must extends the GetX's Translation class. Here is an example: ...

Here is a list of useful Flutter's commands / tips when you start developing with (in progress...). ( To find a topic try to search a keyword on this webpage... will be updated through time ) Create a new project in visual Studio Code >  CMD + Shift + P to display action palette > flutter: New project Update Flutter to the latest version >  flutter upgrade Check actual Flutter version >  flutter --version Flutter change of (git) channel (master, dev, beta stable) >  flutter channel beta > flutter channel master > flutter pub cache repair //To perform a clean reinstall of the packages in your system cache, use pub cache repair > flutter clean //flutter clean will delete the /build folder Activate / Deactivate web support for a project >  flutter config --no-enable-web >  flutter config --enable-web Disable "debug banner" (MaterialApp's debugShowCheckedModeBanner) // This widget is the root of your application. @ override W...

The splash screen is the first screen you see when you start your app. - you can display your logo for instance - and while the splash screen is shown,  your application is loaded (like user data, business data...) In this example we will use flutter_native_splash package. I- Package: flutter_native_splash (for native splash screen) In your " pubspec.yaml " file you have to add the correct dependency, here at less version 2.0.5 # 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 flutter_native_splash : ^2.0.5 hint : Pubspec Assist extension To auto...