Created
January 24, 2023 23:09
-
-
Save flutterdevrelgists/19d0be937682c65783d823b651bf9db7 to your computer and use it in GitHub Desktop.
Adaptive UI Talk: An example of adapting to window size using MediaQuery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Forward 2023', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: const MyHomePage(title: 'Flutter Forward 2023'), | |
); | |
} | |
} | |
class MyHomePage extends StatelessWidget { | |
const MyHomePage({super.key, required this.title}); | |
final String title; | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text(title), | |
), | |
body: const Center( | |
child: Padding( | |
padding: EdgeInsets.all(12.0), | |
child: _AdaptiveStar(), | |
), | |
), | |
); | |
} | |
} | |
class _AdaptiveStar extends StatelessWidget { | |
const _AdaptiveStar(); | |
static const double _breakpoint = 800.0; | |
@override | |
Widget build(BuildContext context) { | |
final Size windowSize = MediaQuery.of(context).size; | |
final bool isSmall = windowSize.width <= _breakpoint; | |
final double starSize = isSmall ? 200.0 : 400.0; | |
return AnimatedContainer( | |
duration: const Duration(milliseconds: 200), | |
alignment: Alignment.center, | |
width: starSize, | |
height: starSize, | |
decoration: ShapeDecoration( | |
shape: StarBorder( | |
points: 5.0, | |
innerRadiusRatio: 0.5, | |
valleyRounding: .2, | |
pointRounding: .2, | |
side: BorderSide( | |
color: const HSLColor.fromAHSL(1, 10 % 360.0, 1.0, 0.6).toColor(), | |
width: isSmall ? 2 : 6, | |
), | |
), | |
color: const HSLColor.fromAHSL(1, 10 % 360.0, 1.0, 0.4).toColor(), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment