CODEWITHSUNDEEP
fluttermaterial-uifluent-ui
axy
axy

Reputation: 307

Can we build a project in flutter with different ui packages for different platforms

I want to build a flutter project, in that

Inner content will be the same for all platform just the layout and features makes difference.

so can i do that, and if yes then whats the approch...

I have tried to build some demo projects, but as soon as I integrate another platforms ui or their features, the project gets crash.

I expect the flow in that I can make platform according ui seprate for all platforms and the screens will be in common.

Upvotes: 0

Views: 652

Answers (1)

Esmaeil Ahmadipour
Esmaeil Ahmadipour

Reputation: 1172

This question may be answered with personal opinions but anyway , for create multiplatform app in flutter , your difficult task is handle UI on multi-screen size and responsive it .

you can using responsive_builder package and flutter_screenutil . in some conditions need another way to use an package . for using responsive_builder on web and android device use this trick:

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return kIsWeb
          ? const MainWidget()
          : const ScreenUtilsWidget(widget: MainWidget());
    });
  }
}

class ScreenUtilsWidget extends StatelessWidget {
  const ScreenUtilsWidget({Key? key, required this.widget}) : super(key: key);
  final Widget widget;

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(360, 690),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (context, child) {
          return widget;
        });
  }
}

class MainWidget extends StatelessWidget {
  const MainWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    // blablabla
    );
  }
}

and for using in widgets do like below:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Column(
        children: [
          ScreenTypeLayout(
            // you can define custom breakpoint for any widget .
            breakpoints: MainSizes.digitalProfileBreakpoints,
            desktop: Stack(//blablabla),
            tablet: Stack((//blablabla),
            mobile: Stack((//blablabla),
          )
        ],
      )),
    );
  }

You maybe need the dart:html handles in all app, but this file are limited on the web (or You need to do something different on the web than on an Android device!).

you can create 3 file and handles this mode.

file web.dart :

import 'dart:html' as html;

void reload() {
  html.window.location.reload();
}


String cookie = "";

file native.dart :

void reload() {}

String cookie = "";

file switch_native_web.dart :

import 'native.dart' if (dart.library.html) 'web.dart' as switch_value;

class SwitchNativeWeb {

  static String cookie = switch_value.cookie;

  static void reloadWeb() {
    switch_value.reload();
  }
}

Upvotes: 1

Related Questions