Astuces Flutter

A) Ajout d’images (Assets) :

Click droit à la racine du projet : create Directory assets et create directory images

Puis Ajout dans le fichier pubsepc.yaml

assets:
- assets/images/lake.jpg

Pour inclure l’ensemble des images du dossier, juste préciser assets/images/

Utilisation de l’image dans le code

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Image from assets"),
        ),
        body: Image.asset('assets/images/lake.jpg'), //   <-- image
      ),
    );
  }
}

B) Ajout d’image en provenance d’internet

  // Get Image From Internet
String getUrlImage(Record record) {
String UrlImage = "https://picsum.photos/250?image=1042";
if (!record.artUri.isEmpty) {
if (isValidURL(record.artUri))
UrlImage = record.artUri;
}
return UrlImage;
}

///////////////////////////////////
// Function to validate URL
bool isValidURL(String url)
{
RegExp regExp = new RegExp("((http|https)://)(www.)?[a-zA-Z0-9@:%._\\+~#?&//=]{2,256}\\.[a-z]{2,6}\\b([-a-zA-Z0-9@:%._\\+~#?&//=]*)");
if (url.isEmpty)
{
return false;
}

if(regExp.hasMatch(url))
{
return true;
}
else
{
return false;
}
}

C) Les échafaudages (Scaffold) :

Ressources : https://medium.com/flutterdevs/know-your-widgets-scaffold-in-flutter-292b8bc1281

D) Les listes :

Supprimer des items en glissant : https://flutter.dev/docs/cookbook/gestures/dismissible

Modifier l’ordre des items en glissant : https://flutterforyou.com/how-to-change-order-of-items-in-a-listview-in-flutter/

Modifier l’ordre et supprimer en glissant : https://stackoverflow.com/questions/62860457/how-to-use-reorderablelistview-with-dismissdirection-in-flutter

Liste avec multi sélection et recherche : https://github.com/CHB61/multi_select_flutter et https://pub.dev/packages/select_dialog

Séparation des éléments d’une liste avec join : https://www.woolha.com/tutorials/dart-join-list-to-string-with-separator-examples

Gestion de plusieurs éléments par ligne via une classe :

Tri des éléments d’une liste :

var intList = [0, 5, 2, 3, 8, 17, 11];
intList.sort();
print(intList);

var tringList = ['vue', 'kotlin','dart', 'angular', 'flutter'];
tringList.sort();
print(tringList);

– Avec la fonction compare, tri d’une liste d’objets :

class Customer {
  String name;
  int age;

  Customer(this.name, this.age);

  @override
  String toString() {
    return '{ ${this.name}, ${this.age} }';
  }
}

main() {
  List customers = [];
  customers.add(Customer('Jack', 23));
  customers.add(Customer('Adam', 27));
  customers.add(Customer('Katherin', 25));

  customers.sort((a, b) => a.age.compareTo(b.age));
  print('Sort by Age: ' + customers.toString());

  customers.sort((a, b) => a.name.compareTo(b.name));
  print('Sort by Name: ' + customers.toString());
}

Références :

https://stackoverflow.com/questions/59692815/how-do-i-call-a-network-image-type-in-a-listview

https://www.woolha.com/tutorials/dart-inserting-elements-into-list-examples

https://bezkoder.com/dart-list/#Sort_a_List_of_objects_in_DartFlutter

https://pusher.com/tutorials/flutter-listviews

https://stackoverflow.com/questions/54066268/how-to-show-a-widget-along-a-listview-on-the-same-screen-in-flutter/54066399

Deux listes à l’écran : https://www.javaer101.com/en/article/11607355.html

https://stackoverflow.com/questions/59947291/how-to-show-two-listview-on-the-same-screen-with-flutter

D) Les boutons actions flottants (comme dans GMAIL)

Voir l’enregistrement automatique

Ils sont de deux types

  1. FloatingActionButton
  2. FloatingActionButton.extended

1. FloatingActionButton

Par défaut création d’un bouton circulaire avec un « child widget ». Et une méthode onPressed avec un « widget » non obligatoire.

2. FloatingActionButton.extended

Ressources : https://proandroiddev.com/a-deep-dive-into-floatingactionbutton-in-flutter-bf95bee11627

Et les toasts et fenêtres de dialogue et d’alerte :

fluttertoast: ^8.0.3
awesome_dialog: ^1.3.2

E) Menus/groupes de boutons :

Différence entre RaisedButton et ElevatedButton : https://www.codegrepper.com/code-examples/whatever/flutter+raisedbutton+vs+elevated+button et https://www.woolha.com/tutorials/flutter-using-elevatedbutton-widget-examples#:~:text=Elevated%20Button%20is%20one%20of,been%20available%20since%20Flutter%201.22. et https://www.kindacode.com/article/working-with-elevatedbutton-in-flutter/

https://pub.dev/packages/floating_action_row/example

@override
Widget build(BuildContext context) {
  var children = List<Widget>();
  children.add(
    FloatingActionRowButton(
      icon: Icon(Icons.close), //Icons.close)
      color:Colors.red,
      onTap: () {_Fin();},
    ),
  );
  children.add(
    FloatingActionRowDivider(),
  );
  children.add(
    FloatingActionRowButton(
      icon: Icon(Icons.add),
      onTap: () {},
    ),
  );
  children.add(
    FloatingActionRowDivider(),
  );
  children.add(
    FloatingActionRowButton(
      icon: Icon(Icons.delete), //arrow_forward
      onTap: () {},
    ),
  );
puis....
floatingActionButton: FloatingActionRow(
  children: children,
  color: Colors.blueAccent,
  elevation: 4,
),

https://pub.dev/packages/flutter_speed_dial

floatingActionButton: SpeedDial(
// both default to 16
marginRight: 18,
marginBottom: 20,
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22.0),
// this is ignored if animatedIcon is non null
// child: Icon(Icons.add),
visible: true,
// If true user is forced to close dial manually
// by tapping main button and overlay is not rendered.
closeManually: false,
curve: Curves.bounceIn,
overlayColor: Colors.black,
overlayOpacity: 0.5,
onOpen: () => print('OPENING DIAL'),
onClose: () => print('DIAL CLOSED'),
tooltip: 'Speed Dial',
heroTag: 'speed-dial-hero-tag',
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 8.0,
shape: CircleBorder(),
children: [
SpeedDialChild(
child: Icon(Icons.close),//Icons.accessibility),
backgroundColor: Colors.red,
label: 'Quit',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => _Fin()//print('FIRST CHILD')
),
SpeedDialChild(
child: Icon(Icons.brush),
backgroundColor: Colors.blue,
label: 'Second',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('SECOND CHILD'),
),
SpeedDialChild(
child: Icon(Icons.keyboard_voice),
backgroundColor: Colors.green,
label: 'Third',
labelStyle: TextStyle(fontSize: 18.0),
onTap: () => print('THIRD CHILD'),
),
],
),

F) Bouton Image :

https://pub.dev/packages/imagebutton et https://medium.com/flutter-community/flutter-widgets-buttons-the-whole-picture-5662a3b58b8f

G) Effets d’animation sur bouton (INKWELL) :

Références :

https://api.flutter.dev/flutter/material/InkWell-class.html

https://www.geeksforgeeks.org/flutter-inkwell-widget/

https://www.kindacode.com/article/flutter-inkwell-examples/

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InkWell',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String inkwell='';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InkWell Widget'),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Text(
            'GFG',
            textScaleFactor: 3,
          )
        ],
      ),
      backgroundColor: Colors.lightBlue[50],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
        Material(
        color: Colors.amber,
          child:
            InkWell(
              hoverColor: Colors.orange,
              splashColor: Colors.red,
              focusColor: Colors.yellow,
              highlightColor: Colors.purple,
              onTap: () {
                setState(() {
                  inkwell='Inkwell Tapped';
                });
              },
              onLongPress: () {
                setState(() {
                  inkwell='InkWell Long Pressed';
                });
              },
              child: Container(
                  //color: Colors.green,
                  width: 120,
                  height: 70,
                  child: Center(
                      child: Text(
                        'Inkwell',
                        textScaleFactor: 2,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ))),
            ),
        ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(inkwell,textScaleFactor: 2,),
            )
          ],
        ),
      ),
    );
  }
}

H) Welcome Screen / Splash Screen / Ecran d’accueil :

Splash Screen au démarrage pour éviter un écran blanc : https://pub.dev/packages/flutter_native_splash

On Boarding screen : https://pub.dev/packages/introduction_screen

https://www.hellohpc.com/flutter-how-to-create-attractive-onboarding-intro-screen-easily/

I) Bottom Navigation Bar et Menu Drawer

À l’intérieur d’un scaffold, instanciez votre Navigation Bar et votre body. Vous pouvez également ajouter une appBar si besoin. Dans votre BottomNavigationBar, ajoutez un currentIndex pour définir l’item en cours, un onTap pour l’action au clic, et votre liste d’items avec une icone et un title.

Ce qui donne :

class PageAccueil extends StatefulWidget {
  PageAccueil({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MaPageAccueilEtat createState() => _MaPageAccueilEtat();
}

class _MaPageAccueilEtat extends State {
  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new FirstFragment();
      case 1:
        return new  SecondFragment();
      case 2:
        return new ThirdFragment();

      default:
        return new Text("");
    }
  }

  @override
  void initState() {
    super.initState();
  }

@override
Widget build(BuildContext context) {
  return new Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      backgroundColor: Colors.blue,
      selectedItemColor: Colors.black,
      unselectedItemColor: Colors.white,
      type: BottomNavigationBarType.fixed,
        currentIndex: _selectedDrawerIndex,
        onTap: (int index) {
          setState(() {
            _selectedDrawerIndex = index;
          });
        },
        items: [
          new BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.dot_radiowaves_left_right),
              /*new ImageIcon(AssetImage('images/ic_logo_large.png')),*/
              label: 'Radio'),
          new BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.bookmark), label: 'Favoris'),
          new BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.list_bullet), label: 'Chaines')
        ],
      ),

    body: _getDrawerItemWidget(_selectedDrawerIndex),
  );
}

Pour changer les couleurs de la navigation bar :

et following properties to change the backgroundselected and unselected colors

bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        ...
)

Navigation dans les pages de la BottomBar par programme :

Navigator.of(context, rootNavigator: true).pushReplacement(
MaterialPageRoute(builder: (context) => new PageAccueil()));

Interception de l’action ‘Back’ bouton retour du téléphone :

Il est nécessaire d’utiliser, dans la page souhaitée, WillPopScope

class maClasse extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () {
      print('Backbutton pressed (device or appbar button), do whatever you want.');

      //trigger leaving and use own data
      //Navigator.pop(context, false);
      Navigator.of(context, rootNavigator: true).pushReplacement(
          MaterialPageRoute(builder: (context) => new PageAccueil()));
      //we need to return a future
      return Future.value(false);
    },
    child:  MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sélection des favoris',
      theme: ThemeData(....

J) Internationalisation :

Références : https://phrase.com/blog/posts/how-to-internationalize-a-flutter-app/

Références :

https://stackoverflow.com/questions/48582963/flutter-how-to-execute-when-clicking-back-button

https://stackoverflow.com/questions/50452710/catch-android-back-button-event-on-flutter

https://stackoverflow.com/questions/52322340/flutter-how-to-remove-bottom-navigation-with-navigation

https://homework.family/menu-bottomnavigationbar-dans-flutter/

https://medium.com/codechai/flutter-6-bottom-navigation-38b202d9ca23

Le même principe est à appliquer pour le navigation Drawer

K) SharedPreferences, gestion des préférences :

Ajouter la dépendance https://pub.dev/packages/shared_preferences/install

Cf. https://fluttercorner.com/how-to-store-and-get-data-from-shared-preferences-in-flutter/

Créer une classe

 import 'package:shared_preferences/shared_preferences.dart';

class StorageUtil {
  static StorageUtil _storageUtil;
  static SharedPreferences _preferences;

  static Future<StorageUtil> getInstance() async {
    if (_storageUtil == null) {
      var secureStorage = StorageUtil._();
      await secureStorage._init();
      _storageUtil = secureStorage;
    }
    return _storageUtil;
  }

  StorageUtil._();
  Future _init() async {
    _preferences = await SharedPreferences.getInstance();
  }
  /////////////////////////////////////////////////////////////
  // String
  // get string
  static String getString(String key, {String defValue = ''}) {
    if (_preferences == null) return defValue;
    return _preferences.getString(key) ?? defValue;
  }

  // put string
  static Future<bool> putString(String key, String value) {
    if (_preferences == null) return null;
    return _preferences.setString(key, value);
  }

  /////////////////////////////////////////////////////////////
  // int
  // get int
  static int getInt(String key, {int defValue = 0}) {
    if (_preferences == null) return defValue;
    return _preferences.getInt(key) ?? defValue;
  }

  // put string
  static Future<bool> putInt(String key, int value) {
    if (_preferences == null) return null;
    return _preferences.setInt(key, value);
  }

  //////////////////////////////////////////////
  // clear all préférences
  static Future<bool> clrString() {
    SharedPreferences prefs = _preferences;
    prefs.clear();
  }

}

Utilisation :

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await StorageUtil.getInstance();
runApp(SharedPreference());
}
StorageUtil.putInt("key_min", actuminutes);
SavedInt =StorageUtil.getInt("key_min");

L) JSON et MAP :

https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

M) Audio :

just_audio et audio_service

Exemples : https://github.com/raywalz/as1iso/blob/master/lib/main.dart

https://nahid-ibne-akhtar.medium.com/flutter-assets-audio-player-a-guideline-to-build-an-audio-player-selecting-files-from-assets-bac388645f41

https://dev.to/paurakhsharma/floating-audio-player-in-flutter-13hj

https://github.com/flutter/flutter/issues/27489

N) Formatage des widgets, contraintes :

https://flutter.dev/docs/development/ui/layout/constraints

Pour afficher conditionnellement un widget :

condition ? Text("True") : Text("False"),

Références : https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen

O) CircularProgressIndicator :

https://medium.com/flutterdevs/circularprogressindicator-linearprogressindicator-in-flutter-369013366a
@override
Widget build(BuildContext context) {
  (...)
  return isLoading
      ? Container(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(), 
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(),
          ],
        ))
      : Scaffold(
         ...

P) Détection d’Internet :

xhttps://flutteragency.com/check-whether-there-is-an-internet-connection-available/

Future<void> infoConnexion() async {
  try {
    final result = await InternetAddress.lookup('google.com');
    if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
      TextTitre = '';
      InternetOk = true;
    }
  } on SocketException catch (_) {
    TextTitre = "Pas d'internet";
    InternetOk = false;
  }
  setState(() {});
}

Puis dans initstate :

@override
void initState() {
  super.initState();
  infoConnexion(); 
...}

Et dans le widget :

@override
Widget build(BuildContext context) {
  return !InternetOk
      ? MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            appBar: AppBar(
              title: Text(TextTitre),
            ),
            body: Center(
              child: Image.asset(
                  'assets/images/no_internet.png'), //   <-- imageText(
            ),
          ))
      : new Scaffold(.................

Q) Internationalisation :

https://pub.dev/packages/intl

R) Publicité :

1°) S’inscrire à AdMob : https://apps.admob.com/v2/home

2°) Sous AdMob créer une application

https://pub.dev/packages/google_mobile_ads

3°) Créer une ou plusieurs annonces de type Bannière ou Interstitielle et récupérer l’ ID d’application et l’ID de bloc d’annonces 

4°) Ajouter dans le fichier manifest.xml à la ligne android:value= la valeur « ID d’application »

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

5°) Modifiez le code de votre application pour insérer les annonces :

Intitialisez le Ads SDK en appelant  MobileAds.instance.initialize() une seule fois pour toute l’application

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

Utilisez un code d’annonce de test fournit ici : https://developers.google.com/admob/android/test-ads#sample%5C_ad%5C_units

Créer une annonce :

final BannerAd myBanner = BannerAd(
  adUnitId: 'ca-app-pub-3940256099942544/6300978111', //-- Pour test
  size: AdSize.banner,
  request: AdRequest(),
  listener: AdListener(),
);

Dans Widget Build charger l’annonce :

myBanner.load();
final AdWidget adWidget = AdWidget(ad: myBanner);

Puis afficher le widget de l’annonce dans l’arbre des widgets :

Container(
alignment: Alignment.center,
child: adWidget,
width: myBanner.size.width.toDouble(),
height: myBanner.size.height.toDouble(),
),

Attention, mettre à jour la version du sdk d’android (19 minimum) dans le fichier build.gradle

defaultConfig {
    applicationId "com.andrologiciels.xxx"
    minSdkVersion 19
    targetSdkVersion 30
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

S) Case à cocher et Switch :

bool _checkbox = false;
String _valbox="décoché";

CheckboxListTile(
              title: Text("Ne plus montrer cette introduction",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.white)),
              value: _checkbox,
              onChanged: (newValue) {
                setState(() {
                  _checkbox = newValue;
                  StorageUtil.putInt("ShowIntro", 1);
                });
              },
              controlAffinity:
                  ListTileControlAffinity.leading, //  <-- leading Checkbox
            )

Switch :

https://fluttergems.dev/switch/

https://pub.dev/packages/list_tile_switch/versions/0.0.2

Références :

https://developers.google.com/admob/flutter/quick-start

https://flutter.dev/ads

https://developers.google.com/admob/flutter/banner

T) Traduction et localisation :

  1. créer le répertoire qui contiendra les traductions (exemple langues) dans le répertoire assets (à créer) à la racine et ajouter dans le pubsepc.yaml
assets:
  - assets/langues/

2. Ajoutez la dépendance Easy Localization dans pubspec.yaml (exemple ici)

dependencies:
flutter:
sdk: flutter
# Internationalisation
easy_localization: 3.0.0

3. Dans votre code ajoutez pour la version null-safety 3.0.0 :

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(EasyLocalization(
    child: MyApp(),
    supportedLocales: [
      Locale('en', 'US'),
      Locale('ar', 'DZ'),
      Locale('de', 'DE'),
      Locale('ru', 'RU'),
      Locale('fr', 'FR')
    ],
    path: 'assets/langues',
  ));
}

Pour la version "normale" 2.3.3+1 :
void main() {
  runApp(
    EasyLocalization(
        supportedLocales: [Locale('en', 'US'), Locale('fr', 'FR')],
        path: 'assets/langues', // <-- change patch to your
        fallbackLocale: Locale('en', 'US'),
        child: MyApp()
    ),
  );
}

Et juste après 
  Widget build(BuildContext context) {
    return MaterialApp(

Ajouter 
     localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,

Pour chaque textes à traduire, remplacer :

le texte par ‘texte_à_traduire’.tr(), exemple :

'title'.tr()

dans un widget Text : Text('msg').tr(args: ['Andrologiciels', 'Flutter']), avec dans le Json :   "msg": "Bonjour {} dans le {} monde ",

avec un style de texte :             
           Text(('msg').tr(args: ['Andrologiciels', 'Flutter']),
                    style: TextStyle(
                                  color: Colors.grey.shade900,
                                 fontSize: 18,
                                 fontWeight: FontWeight.bold)),

4. Créer les fichiers traduction en json

{
"title": "Hello",

4. Des assistances :

flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart –source-dir ./assets/langues

Puis dans le code : LocaleKeys.title.tr(),

flutter pub run easy_localization:generate –source-dir ./assets/langues

La liste des codes des pays est ici et la liste des langues

X) Utilitaires :

Test de code DART en ligne : https://dartpad.dartlang.org/flutter

Liste des icônes Cupertino Icons

Mais aussi pour les icônes : https://oblador.github.io/react-native-vector-icons/ avec le package https://pub.dev/packages/flutter_vector_icons/install

Expandable : A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). https://www.google.com/search?q=flutter+use+of+expandzd&oq=flutter+use+of+expandzd&aqs=chrome..69i57.8982j0j4&client=ms-android-samsung-ss&sourceid=chrome-mobile&ie=UTF-8

Containers : https://stackoverflow.com/questions/58000474/how-to-add-more-than-one-container-in-body

Utilisation de variables globales : https://stackoverflow.com/questions/29182581/global-variables-in-dart

Multi-sélection et recherche dans une liste : https://pub.dev/packages/multi_select_flutter

navigation dans l’application :

Il est nécessaire dans le widget de base de nommer la racine et de désigner les widgets fils

Exmple la racine »initialroute », sera nommée « / » et aura comme affectation le widget « toto »

puis on déclare les autres pages en les nommant (exemple « /second ») et en leur affectant un widget, ce qui donne :

initialRoute: '/',
routes: {
  '/': (context) => MonWidgetPrincipal(),
  '/second': (context) => ReorderExample(),
}

Code à placer à la place de :

home: MonWidgetPrincipal(),

Il faudra alors appeler les pages filles, à partir de la page « / » selon la syntaxe :

onTap: () {
   Navigator.pushNamed(context, '/second');
},

https://flutter.dev/docs/cookbook/navigation/named-routes

https://flutter.dev/docs/cookbook/navigation/navigation-basics

Pour simplement ouvrir une page :

Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyNewPage()));

Fermeture de l’application :

SystemChannels.platform.invokeMethod('SystemNavigator.pop');
Orientation de l'écran en portrait :
@override
void initState() {
  super.initState();

  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.black,
  ));

}

Retrait de la barre de statut :

SystemChrome.setEnabledSystemUIOverlays([]);

Pour la rétablir : SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values).

Retrait de la barre de l’application (App Bar) :

        // appBar: AppBar(
        //   title: Text(appTitle),
        // ),

Toast et alertes :

Fluttertoast.showToast(
    msg: "Vous devez sélectionner au moins une radio favorite",
    toastLength: Toast.LENGTH_LONG,
    gravity: ToastGravity.CENTER,
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.red,
    textColor: Colors.white,
    fontSize: 16.0
);
Références : https://pub.dev/packages/fluttertoast

SnackBar :

ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('selradiotttheme').tr()));
 
Références : https://flutter.dev/docs/cookbook/design/snackbars
Articles récents
Commentaires récents
fatima dans Bienvenue !
AdminDroid dans Bienvenue !
fatima dans Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :