update breakpoint package
This commit is contained in:
@@ -1,74 +1,309 @@
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:breakpoint/breakpoint.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// main is entry point of Flutter application
|
||||
void main() {
|
||||
// Desktop platforms aren't a valid platform.
|
||||
if (!kIsWeb) _setTargetPlatformForDesktop();
|
||||
return runApp(MyApp());
|
||||
}
|
||||
|
||||
/// If the current platform is desktop, override the default platform to
|
||||
/// a supported platform (iOS for macOS, Android for Linux and Windows).
|
||||
/// Otherwise, do nothing.
|
||||
void _setTargetPlatformForDesktop() {
|
||||
TargetPlatform targetPlatform;
|
||||
if (Platform.isMacOS) {
|
||||
targetPlatform = TargetPlatform.iOS;
|
||||
} else if (Platform.isLinux || Platform.isWindows) {
|
||||
targetPlatform = TargetPlatform.android;
|
||||
}
|
||||
if (targetPlatform != null) {
|
||||
debugDefaultTargetPlatformOverride = targetPlatform;
|
||||
}
|
||||
runApp(const MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
title: 'Flutter Demo',
|
||||
title: 'Breakpoint Example',
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: ThemeData(
|
||||
primarySwatch: Colors.blue,
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: const Color(0xFF6750A4),
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
),
|
||||
home: MyHomePage(),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: const Color(0xFF6750A4),
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
themeMode: ThemeMode.system,
|
||||
home: const HomePage(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatelessWidget {
|
||||
class HomePage extends StatelessWidget {
|
||||
const HomePage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(builder: (_, constraints) {
|
||||
final _breakpoint = Breakpoint.fromConstraints(constraints);
|
||||
return LayoutBuilder(builder: (context, constraints) {
|
||||
final breakpoint = Breakpoint.fromConstraints(constraints);
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Breakpoint Example: ${_breakpoint.toString()}'),
|
||||
),
|
||||
body: Container(
|
||||
padding: EdgeInsets.all(_breakpoint.gutters),
|
||||
child: GridView.builder(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: _breakpoint.columns,
|
||||
crossAxisSpacing: _breakpoint.gutters,
|
||||
mainAxisSpacing: _breakpoint.gutters,
|
||||
),
|
||||
itemCount: 200,
|
||||
itemBuilder: (_, index) {
|
||||
return Container(
|
||||
child: Card(
|
||||
child: Text(
|
||||
index.toString(),
|
||||
),
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar.medium(
|
||||
title: const Text('Breakpoint Gallery'),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.info_outline),
|
||||
onPressed: () {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => BreakpointInfoSheet(
|
||||
breakpoint: breakpoint,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: breakpoint.margin,
|
||||
vertical: 16,
|
||||
),
|
||||
child: BreakpointInfoCard(breakpoint: breakpoint),
|
||||
),
|
||||
),
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.symmetric(horizontal: breakpoint.margin),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: breakpoint.columns,
|
||||
crossAxisSpacing: breakpoint.gutters,
|
||||
mainAxisSpacing: breakpoint.gutters,
|
||||
childAspectRatio: 1.0,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) {
|
||||
return GridItem(index: index);
|
||||
},
|
||||
childCount: 24,
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: SizedBox(height: breakpoint.gutters),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class BreakpointInfoCard extends StatelessWidget {
|
||||
const BreakpointInfoCard({
|
||||
super.key,
|
||||
required this.breakpoint,
|
||||
});
|
||||
|
||||
final Breakpoint breakpoint;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
return Card(
|
||||
elevation: 0,
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Current Layout',
|
||||
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Device',
|
||||
value: breakpoint.device.name,
|
||||
icon: Icons.devices,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Window',
|
||||
value: breakpoint.window.name,
|
||||
icon: Icons.window,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Columns',
|
||||
value: '${breakpoint.columns}',
|
||||
icon: Icons.view_column,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Gutters',
|
||||
value: '${breakpoint.gutters}px',
|
||||
icon: Icons.space_bar,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: _InfoItem(
|
||||
label: 'Margin',
|
||||
value: '${breakpoint.margin}px',
|
||||
icon: Icons.border_outer,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoItem extends StatelessWidget {
|
||||
const _InfoItem({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.icon,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
final IconData icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(icon, size: 20, color: Theme.of(context).colorScheme.secondary),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class GridItem extends StatelessWidget {
|
||||
const GridItem({
|
||||
super.key,
|
||||
required this.index,
|
||||
});
|
||||
|
||||
final int index;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
return Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: () {},
|
||||
child: LayoutBuilder(builder: (context, constraints) {
|
||||
final isSmall = constraints.maxHeight < 80;
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Container(
|
||||
color: colorScheme.primaryContainer
|
||||
.withValues(alpha: (index % 5 + 1) * 0.1),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.image,
|
||||
size: isSmall ? 32 : 48,
|
||||
color: colorScheme.primary.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (!isSmall)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Item $index',
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
height: 8,
|
||||
width: 60,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class BreakpointInfoSheet extends StatelessWidget {
|
||||
const BreakpointInfoSheet({
|
||||
super.key,
|
||||
required this.breakpoint,
|
||||
});
|
||||
|
||||
final Breakpoint breakpoint;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(24),
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Breakpoint Details',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text('Device Class: ${breakpoint.device}'),
|
||||
Text('Window Size: ${breakpoint.window}'),
|
||||
Text('Column Count: ${breakpoint.columns}'),
|
||||
Text('Gutter Size: ${breakpoint.gutters}'),
|
||||
Text('Margin Size: ${breakpoint.margin}'),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user