Skip to content

Commit

Permalink
ResponsiveFramework v1.1.0 Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@rayliverified
rayliverified committed Feb 23, 2024
1 parent 3cda1d6 commit 6b53796
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 45 deletions.
23 changes: 9 additions & 14 deletions lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,14 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dart packages',
builder: (context, widget) => ResponsiveWrapper.builder(
ClampingScrollWrapper.builder(context, widget!),
defaultScale: true,
minWidth: 360,
defaultName: MOBILE,
breakpoints: [
const ResponsiveBreakpoint.resize(360),
const ResponsiveBreakpoint.resize(480, name: MOBILE),
const ResponsiveBreakpoint.resize(640, name: 'MOBILE_LARGE'),
const ResponsiveBreakpoint.resize(850, name: TABLET),
const ResponsiveBreakpoint.resize(1080, name: DESKTOP),
],
),
builder: (context, widget) => ResponsiveBreakpoints.builder(
child: ClampingScrollWrapper.builder(context, widget!),
breakpoints: [
const Breakpoint(start: 0, end: 480, name: MOBILE),
const Breakpoint(start: 481, end: 640, name: 'MOBILE_LARGE'),
const Breakpoint(start: 641, end: 1080, name: TABLET),
const Breakpoint(start: 1081, end: double.infinity, name: DESKTOP),
]),
home: Scaffold(
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
Expand All @@ -36,7 +31,7 @@ class MyApp extends StatelessWidget {
},
child: Column(
children: <Widget>[
const MenuBar(),
const MenuHeader(),
const Header(),
const FlutterFavorites(),
// Background squares image container.
Expand Down
79 changes: 48 additions & 31 deletions lib/ui/blocks.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import 'package:pub_dev/packages_data.dart';
import 'package:pub_dev/utils/utils.dart';
import 'package:responsive_framework/responsive_framework.dart';

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

@override
Widget build(BuildContext context) {
Expand All @@ -18,22 +18,26 @@ class MenuBar extends StatelessWidget {
defaultValue: const EdgeInsets.symmetric(
horizontal: 35,
),
valueWhen: [
const Condition.smallerThan(
name: TABLET, value: EdgeInsets.symmetric(horizontal: 0))
conditionalValues: [
Condition.smallerThan(
name: TABLET, value: const EdgeInsets.symmetric(horizontal: 0))
]).value,
child: Row(
children: [
ResponsiveVisibility(
visible: true,
hiddenWhen: const [Condition.smallerThan(name: TABLET)],
hiddenConditions: [
Condition.smallerThan(name: TABLET, value: false)
],
child: Expanded(
child: Container(),
),
),
ResponsiveVisibility(
visible: false,
visibleWhen: const [Condition.smallerThan(name: TABLET)],
visibleConditions: [
Condition.smallerThan(name: TABLET, value: false)
],
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.menu,
Expand All @@ -42,12 +46,14 @@ class MenuBar extends StatelessWidget {
),
ResponsiveVisibility(
visible: true,
hiddenWhen: const [Condition.smallerThan(name: TABLET)],
hiddenConditions: [
Condition.smallerThan(name: TABLET, value: false)
],
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
primary: materialSplashRippleLightColor),
foregroundColor: materialSplashRippleLightColor),
child: const Text(
'Sign in',
style: TextStyle(
Expand All @@ -57,15 +63,17 @@ class MenuBar extends StatelessWidget {
),
ResponsiveVisibility(
visible: true,
hiddenWhen: const [Condition.smallerThan(name: TABLET)],
hiddenConditions: [
Condition.smallerThan(name: TABLET, value: false)
],
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
primary: materialSplashRippleLightColor),
child: Row(
foregroundColor: materialSplashRippleLightColor),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: const [
children: [
Text(
'Help',
style: TextStyle(
Expand Down Expand Up @@ -199,7 +207,7 @@ class FlutterFavorites extends StatelessWidget {
),
),
const Padding(padding: EdgeInsets.only(bottom: 10)),
if (ResponsiveWrapper.of(context).isLargerThan(MOBILE))
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE))
ResponsiveGridView.builder(
gridDelegate: const ResponsiveGridDelegate(
crossAxisExtent: 260,
Expand All @@ -216,7 +224,7 @@ class FlutterFavorites extends StatelessWidget {
return PackageCard(package: favoritePackages[index]);
},
),
if (ResponsiveWrapper.of(context).isSmallerThan('MOBILE_LARGE'))
if (ResponsiveBreakpoints.of(context).smallerThan('MOBILE_LARGE'))
...favoritePackages.map((e) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: PackageCard(package: e),
Expand Down Expand Up @@ -258,7 +266,9 @@ class MostPopular extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
ResponsiveVisibility(
hiddenWhen: const [Condition.smallerThan(name: DESKTOP)],
hiddenConditions: [
Condition.smallerThan(name: DESKTOP, value: false)
],
child: Flexible(
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 280),
Expand All @@ -270,8 +280,8 @@ class MostPopular extends StatelessWidget {
ResponsiveRowColumnItem(
rowFlex: ResponsiveValue<int?>(context,
defaultValue: null,
valueWhen: [
const Condition.smallerThan(name: DESKTOP, value: 1)
conditionalValues: [
Condition.smallerThan(name: DESKTOP, value: 1)
]).value,
child: Column(
mainAxisSize: MainAxisSize.min,
Expand All @@ -283,7 +293,7 @@ class MostPopular extends StatelessWidget {
style: TextStyle(
color: textPrimaryColor, fontSize: 18, height: 1.6)),
const Padding(padding: EdgeInsets.only(bottom: 10)),
if (ResponsiveWrapper.of(context).isLargerThan(MOBILE))
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE))
Align(
alignment: Alignment.center,
child: Container(
Expand All @@ -306,7 +316,8 @@ class MostPopular extends StatelessWidget {
),
),
),
if (ResponsiveWrapper.of(context).isSmallerThan('MOBILE_LARGE'))
if (ResponsiveBreakpoints.of(context)
.smallerThan('MOBILE_LARGE'))
...popularPackages.map((e) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: PackageCard(package: e),
Expand Down Expand Up @@ -353,8 +364,8 @@ class TopFlutter extends StatelessWidget {
ResponsiveRowColumnItem(
rowFlex: ResponsiveValue<int?>(context,
defaultValue: null,
valueWhen: [
const Condition.smallerThan(name: DESKTOP, value: 1)
conditionalValues: [
Condition.smallerThan(name: DESKTOP, value: 1)
]).value,
child: Column(
mainAxisSize: MainAxisSize.min,
Expand All @@ -366,7 +377,7 @@ class TopFlutter extends StatelessWidget {
style: TextStyle(
color: textPrimaryColor, fontSize: 18, height: 1.6)),
const Padding(padding: EdgeInsets.only(bottom: 10)),
if (ResponsiveWrapper.of(context).isLargerThan(MOBILE))
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE))
Align(
alignment: Alignment.center,
child: Container(
Expand All @@ -390,7 +401,8 @@ class TopFlutter extends StatelessWidget {
),
),
),
if (ResponsiveWrapper.of(context).isSmallerThan('MOBILE_LARGE'))
if (ResponsiveBreakpoints.of(context)
.smallerThan('MOBILE_LARGE'))
...topFlutterPackages.map((e) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: PackageCard(package: e),
Expand Down Expand Up @@ -418,7 +430,9 @@ class TopFlutter extends StatelessWidget {
),
),
ResponsiveVisibility(
hiddenWhen: const [Condition.smallerThan(name: DESKTOP)],
hiddenConditions: [
Condition.smallerThan(name: DESKTOP, value: false)
],
child: Flexible(
child: Container(
margin: const EdgeInsets.only(top: 60),
Expand Down Expand Up @@ -448,7 +462,9 @@ class TopDart extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center,
children: [
ResponsiveVisibility(
hiddenWhen: const [Condition.smallerThan(name: DESKTOP)],
hiddenConditions: [
Condition.smallerThan(name: DESKTOP, value: false)
],
child: Flexible(
child: Container(
margin: const EdgeInsets.only(top: 60),
Expand All @@ -463,8 +479,8 @@ class TopDart extends StatelessWidget {
ResponsiveRowColumnItem(
rowFlex: ResponsiveValue<int?>(context,
defaultValue: null,
valueWhen: [
const Condition.smallerThan(name: DESKTOP, value: 1)
conditionalValues: [
Condition.smallerThan(name: DESKTOP, value: 1)
]).value,
child: Column(
mainAxisSize: MainAxisSize.min,
Expand All @@ -476,7 +492,7 @@ class TopDart extends StatelessWidget {
style: TextStyle(
color: textPrimaryColor, fontSize: 18, height: 1.6)),
const Padding(padding: EdgeInsets.only(bottom: 10)),
if (ResponsiveWrapper.of(context).isLargerThan(MOBILE))
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE))
Align(
alignment: Alignment.center,
child: Container(
Expand All @@ -499,7 +515,8 @@ class TopDart extends StatelessWidget {
),
),
),
if (ResponsiveWrapper.of(context).isSmallerThan('MOBILE_LARGE'))
if (ResponsiveBreakpoints.of(context)
.smallerThan('MOBILE_LARGE'))
...topDartPackages.map((e) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: PackageCard(package: e),
Expand Down Expand Up @@ -566,7 +583,7 @@ class PackageCard extends StatelessWidget {
maxLines: 3,
overflow: TextOverflow.clip),
const Padding(padding: EdgeInsets.only(bottom: 16)),
if (ResponsiveWrapper.of(context).isLargerThan('MOBILE_LARGE'))
if (ResponsiveBreakpoints.of(context).largerThan('MOBILE_LARGE'))
const Spacer(),
if (package.publisher.isNotEmpty)
Row(
Expand Down

0 comments on commit 6b53796

Please sign in to comment.