Exp-3b: implement media queries and breakpoints for responsiveness
import 'package:flutter/material.dart';
void main() => runApp(ResponsiveLoginApp());
class ResponsiveLoginApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Login with Breakpoints',
home: Scaffold(
appBar: AppBar(title: Text('Responsive Login')),
body: ResponsiveLoginPage(),
),
);
class ResponsiveLoginPage extends StatelessWidget {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
// Define breakpoints
const mobileBreakpoint = 600;
const tabletBreakpoint = 1024;
Widget loginForm(double width) {
return Container(
width: width,
padding: EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Login', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
SizedBox(height: 20),
TextField(
controller: _emailController,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
SizedBox(height: 16),
TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
SizedBox(height: 24),
ElevatedButton(
onPressed: () {
final email = _emailController.text;
final password = _passwordController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Email: $email\nPassword: $password')),
);
},
child: Text('Login'),
),
],
),
);
if (screenWidth < mobileBreakpoint) {
// Mobile layout
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
elevation: 6,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: loginForm(screenWidth * 0.9),
),
),
);
} else if (screenWidth < tabletBreakpoint) {
// Tablet layout
return Center(
child: Card(
elevation: 8,
margin: EdgeInsets.all(32),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: loginForm(400),
),
);
} else {
// Desktop layout
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 300,
height: 300,
margin: EdgeInsets.all(32),
padding: EdgeInsets.all(24),
color: Colors.blue[100],
child: Center(
child: Text(
' Welcome Back!',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
textAlign: TextAlign.center,
),
),
),
Card(
elevation: 10,
margin: EdgeInsets.all(32),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: loginForm(400),
),
],
),
);
