Un package flutter pour vous aider à rendre votre expérience de développement Web transparente en utilisant flutter pour le Web

Un package Flutter pour vous aider à développer pour le Web de manière plus intuitive et efficace lorsqu’il s’agit d’applications Web réactives.

Ce forfait a two responsive widgets et one utility class que vous pouvez utiliser à votre guise.

• Widgets réactifs :
  • WebResponsiveScaffold
  • WebResponsiveLayout
• Classe utilitaire

Soutenez-moi sur Patreon

Widgets réactifs : WebResponsiveScaffold

Vous donne la possibilité de remplacer entièrement vos widgets Scaffold

Et vous pouvez passer des paramètres pour chaque taille d’écran (

paramètres tels que : Barre d’applications, Tiroir, Corps d’échafaudage et un Bouton d’action flottant

)

import 'package:flutter/material.dart';
import 'package:testing_web/web_responsive_utils.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: WebResponsiveScaffold(
         smallLayoutAppBar: /* Your Custom Widget */,
         smallLayoutDrawer: /* Your Custom Widget */,
         smallLayoutFAB: /* Your Custom Widget */,
         smallLayoutWidget: /* Your Custom Widget */,
         mediumLayoutAppBar: /* Your Custom Widget */,
         mediumLayoutDrawer: /* Your Custom Widget */,
         mediumLayoutFAB: /* Your Custom Widget */,
         mediumLayoutWidget: /* Your Custom Widget */,
         xLargeLayoutAppBar: /* Your Custom Widget */,
         xLargeLayoutDrawer: /* Your Custom Widget */,
         xLargeLayoutFAB: /* Your Custom Widget */,
         xLargeLayoutWidget: /* Your Custom Widget */,
       ),
   );
 }
}

Widgets réactifs : WebResponsiveLayout

Vous donne la possibilité d’avoir un widget différent pour chaque taille d’écran

import 'package:flutter/material.dart';
import 'package:testing_web/web_responsive_utils.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
        body: WebResponsiveLayout(
          smallLayoutWidget: /* Your Custom Widget */,
          mediumLayoutWidget: /* Your Custom Widget */,
          xLargeLayoutWidget: /* Your Custom Widget */,
        ),
      ),
    );
  }
}

Utilitaire réactif : ResponsiveScreen

if (ResponsiveScreen.isSmall(context)) {/*Your code here*/}
if (ResponsiveScreen.isXSmall(context)) {/*Your code here*/}
if (ResponsiveScreen.isMedium(context)) {/*Your code here*/}
if (ResponsiveScreen.isXLarge(context)) {/*Your code here*/}

GitHub

Voir Github