Responsive Widget is a package for rendering proper layouts for mobile and tablet inspired from responsive_builder
In your pubspec.yaml
:
dependencies:
responsive_widget:
git:
url: https://github.com/chinkysight/responsive_widget
ref: v2.0.0
For more information on package dependencies, https://dart.dev/tools/pub/dependencies
First import the package
import 'package:responsive_widget/responsive_widget.dart';
Then wrap your views with ResponsiveWidget
ResponsiveWidget(mobile: MyAppMobile(), tablet: MyAppTablet());
Voila! we are done
You can also set your own breakpoint for tablet
ResponsiveWidget(mobile: MyAppMobile(), tablet: MyAppTablet(), breakpointForTablet: 750.0);
import 'package:flutter/material.dart';
import 'package:responsive_widget/responsive_widget.dart';
void main() {
runApp(Home());
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ResponsiveWidget(mobile: HomeMobile(), tablet: HomeTablet()),
);
}
}
class HomeMobile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("Home Mobile")),
);
}
}
class HomeTablet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text("Home Tablet")),
);
}
}