import 'package:flutter/material.dart';
class OptimizedImage extends StatelessWidget {
final String imageUrl;
final double width;
final double height;
const OptimizedImage({
super.key,
required this.imageUrl,
required this.width,
required this.height,
});
@override
Widget build(BuildContext context) {
return Image.network(
imageUrl,
width: width,
height: height,
fit: BoxFit.cover,
// 使用缓存
cacheWidth: width.toInt() * 2,
cacheHeight: height.toInt() * 2,
// 加载占位符
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
width: width,
height: height,
color: Colors.grey[300],
child: const Center(child: CircularProgressIndicator()),
);
},
// 错误处理
errorBuilder: (context, error, stackTrace) {
return Container(
width: width,
height: height,
color: Colors.grey[300],
child: const Icon(Icons.error),
);
},
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void main() {
setUrlStrategy(PathUrlStrategy());
runApp(const BlogApp());
}
class BlogApp extends StatelessWidget {
const BlogApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web 博客',
theme: ThemeData(
primarySwatch: Colors.blue,
useMaterial3: true,
),
initialRoute: '/',
routes: {
'/': (context) => const HomePage(),
'/post': (context) => const PostPage(),
'/about': (context) => const AboutPage(),
},
);
}
}
// 首页
class HomePage extends StatelessWidget {
const HomePage({super.key});
final List<Map<String, String>> posts = const [
{
'title': 'Flutter Web 入门指南',
'excerpt': '学习如何使用 Flutter 构建 Web 应用...',
'date': '2024-03-31',
},
{
'title': '响应式布局最佳实践',
'excerpt': '掌握 Flutter 中的响应式设计技巧...',
'date': '2024-03-30',
},
{
'title': '性能优化技巧',
'excerpt': '提升 Flutter Web 应用性能的实用方法...',
'date': '2024-03-29',
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Web 博客'),
actions: [
TextButton(
onPressed: () => Navigator.pushNamed(context, '/about'),
child: const Text('关于', style: TextStyle(color: Colors.white)),
),
],
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 800),
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'最新文章',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
...posts.map((post) => PostCard(post: post)),
],
),
),
),
);
},
),
);
}
}
// 文章卡片
class PostCard extends StatelessWidget {
final Map<String, String> post;
const PostCard({super.key, required this.post});
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.only(bottom: 16),
child: InkWell(
onTap: () => Navigator.pushNamed(context, '/post'),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
post['title']!,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
post['excerpt']!,
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
),
),
const SizedBox(height: 12),
Text(
post['date']!,
style: TextStyle(
fontSize: 14,
color: Colors.grey[500],
),
),
],
),
),
),
);
}
}
// 文章详情页
class PostPage extends StatelessWidget {
const PostPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('文章详情'),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: SingleChildScrollView(
child: Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 800),
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Flutter Web 入门指南',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
Text(
'2024-03-31',
style: TextStyle(
fontSize: 14,
color: Colors.grey[500],
),
),
const SizedBox(height: 24),
const Text(
'Flutter Web 是 Flutter 框架的 Web 支持，它允许开发者使用 Flutter 的 UI 框架和 Dart 语言来构建 Web 应用。',
style: TextStyle(
fontSize: 18,
height: 1.6,
),
),
const SizedBox(height: 16),
const Text(
'在本文中，我们将学习如何搭建 Flutter Web 开发环境，创建第一个 Web 应用，以及了解 Web 开发的最佳实践。',
style: TextStyle(
fontSize: 18,
height: 1.6,
),
),
],
),
),
),
),
);
}
}
// 关于页面
class AboutPage extends StatelessWidget {
const AboutPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('关于'),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
),
body: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Flutter Web 博客',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16),
Text(
'使用 Flutter Web 构建的现代化博客应用',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
],
),
),
);
}
}
