Skip to content

Instantly share code, notes, and snippets.

@obumnwabude

obumnwabude/responsive.dart

Created July 21, 2023 17:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save obumnwabude/fdca7012e76b47c56fbf8036bb349dea to your computer and use it in GitHub Desktop.
Save obumnwabude/fdca7012e76b47c56fbf8036bb349dea to your computer and use it in GitHub Desktop.
Download ZIP
Code Snippets for HTML/CSS and Flutter that were used during the "Flutter For Web Developers" session in Google I/O Extended Onitsha 2023. Find the Event Slide at https://docs.google.com/presentation/d/10yZRHJjEbtIq83oY5HrO7wC3xTSckz2CY1AK_tPgObY/edit?usp=sharing
Raw
responsive.dart
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(
home: Scaffold(
body: Flex(
direction: MediaQuery.of(context).size.width > 768
? Axis.horizontal
: Axis.vertical,
children: const [RoundedShadowedBox(), RoundedShadowedBox()],
),
),
);
}
}
class RoundedShadowedBox extends StatelessWidget {
const RoundedShadowedBox({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
boxShadow: const [BoxShadow(offset: Offset(0, 0), blurRadius: 16)],
color: Colors.black,
),
height: 200,
margin: const EdgeInsets.all(32),
width: 200,
);
}
}
Raw
responsive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive</title>
<style>
div {
background-color: black;
border-radius: 32px;
box-shadow: 0 0 16px;
height: 200px;
margin: 32px;
width: 200px;
}
@media (min-width: 768px) {
section {
display: flex;
}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
Raw
ui.dart
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(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(32),
boxShadow: const [BoxShadow(offset: Offset(0, 0), blurRadius: 16)],
),
height: 200,
margin: const EdgeInsets.all(32),
width: 200,
),
),
);
}
}
Raw
ui.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI</title>
<style>
div {
background-color: black;
border-radius: 32px;
box-shadow: 0 0 16px;
height: 200px;
margin: 32px;
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment