responsive_screen_type 1.0.2 responsive_screen_type: ^1.0.2 copied to clipboard
A Flutter package for responsive screens.
Screenshot #
Getting started #
Adding package #
responsive_screens: ^1.0.2
Importing package #
import 'package:responsive_screens/responsive_screen_type.dart';
Usage #
To use this plugin, add rxdart_bloc as a dependency in your pubspec.yaml file.
Example #
Here are an example that show you how to use this plugin.
main.dart #
import 'package:flutter/material.dart';
import 'view/responsive_view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter responsive_screen',
home: ResponsiveView(),
);
}
}
responsive_view.dart #
import 'responsive_view_mobile.dart';
import 'responsive_view_tablet.dart';
import 'responsive_view_desktop.dart';
import 'package:flutter/material.dart';
import 'package:responsive_screens/responsive_screen_type.dart';
class ResponsiveView extends StatelessWidget {
const ResponsiveView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const ScreenTypeLayout(
mobile: ResponsiveViewMobile(),
tablet: ResponsiveViewTablet(),
desktop: ResponsiveViewDesktop(),
);
}
}
responsive_view_mobile.dart #
import 'package:flutter/material.dart';
class ResponsiveViewMobile extends StatefulWidget {
const ResponsiveViewMobile({Key? key}) : super(key: key);
@override
State<ResponsiveViewMobile> createState() => _ResponsiveViewMobileState();
}
class _ResponsiveViewMobileState extends State<ResponsiveViewMobile> {
@override
Widget build(BuildContext context) {
// TODO: implement getBody
return const Scaffold(
backgroundColor: Colors.red,
body: Center(
child: Text(
'Welcome from mobile screen',
style: TextStyle(
color: Colors.white, fontSize: 25, fontWeight: FontWeight.bold),
),
),
);
}
}
responsive_screens widgets #
ScreenTypeLayout #
ScreenTypeLayout is a Flutter widget you can provide a multi screen type to ((required) mobile - (optional) tablet - (optional) desktop) .
ScreenTypeLayout(
mobile: ResponsiveViewMobile(),
tablet: ResponsiveViewTablet(),
desktop: ResponsiveViewDesktop(),
);