Posts

Showing posts with the label flutter

[Flutter] Adding background image to your pages

Image
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 (

[Flutter] Get some special directories path

Image
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

[Flutter] Translations, internationalisation with GetX package

Image
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:

[Flutter] Useful commands and tips

Image
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 Widget buil

[Flutter] Splashscreen (native way)

Image
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