diff --git a/README.en.md b/README.en.md index 986dd2978ea69593a95fb73ccb8f562ac113812e..22c1c5b25c4254c45871200c510fc27e5ee476d7 100644 --- a/README.en.md +++ b/README.en.md @@ -1,37 +1,7 @@ # flutter-mastery #### Description -A repository showcasing my journey to mastering Flutter, including all my projects and code backups. -学习 Flutter 之路，从入门到进阶到精通 - -#### Software Architecture -Software architecture description - -#### Installation - -1. xxxx -2. xxxx -3. xxxx - -#### Instructions -1. xxxx -2. xxxx -3. xxxx +A repository showcasing my journey to mastering Flutter, including all my projects and code backups. -#### Contribution - -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request - - -#### Gitee Feature - -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +学习 Flutter 之路，从入门到进阶到精通 diff --git a/assets/flutter_first_application/favorite_page..png b/assets/flutter_first_application/favorite_page..png new file mode 100644 index 0000000000000000000000000000000000000000..a53daf45a0a72f469f05eaa14ac27bda5343627e Binary files /dev/null and b/assets/flutter_first_application/favorite_page..png differ diff --git a/assets/flutter_first_application/home_page.png b/assets/flutter_first_application/home_page.png new file mode 100644 index 0000000000000000000000000000000000000000..490af7d549d782702fed817ffbeae181f5395d69 Binary files /dev/null and b/assets/flutter_first_application/home_page.png differ diff --git a/assets/flutter_layout_application/home.png b/assets/flutter_layout_application/home.png new file mode 100644 index 0000000000000000000000000000000000000000..e54bf7f2e780806e6d984af139eb2c859aa8aac0 Binary files /dev/null and b/assets/flutter_layout_application/home.png differ diff --git a/assets/flutter_layout_application/preview.png b/assets/flutter_layout_application/preview.png new file mode 100644 index 0000000000000000000000000000000000000000..f6bff877ac8bc138766ec6c89032b5f2744afd41 Binary files /dev/null and b/assets/flutter_layout_application/preview.png differ diff --git a/assets/flutter_web_application/index.png b/assets/flutter_web_application/index.png new file mode 100644 index 0000000000000000000000000000000000000000..3266d0a08494a7828817f2662a1ffe645f470588 Binary files /dev/null and b/assets/flutter_web_application/index.png differ diff --git a/flutter_samples/flutter_first_application/README.md b/flutter_samples/flutter_first_application/README.md index 8031ca519870ef850908c8ab078f271beeeadda1..88bc9f02ff4f8f7fcce71542be547a213e3fc78f 100644 --- a/flutter_samples/flutter_first_application/README.md +++ b/flutter_samples/flutter_first_application/README.md @@ -2,15 +2,8 @@ A new Flutter project. -## Getting Started +## 项目运行截图 -This project is a starting point for a Flutter application. +![Alt text](../../assets/flutter_first_application/home_page.png) -A few resources to get you started if this is your first Flutter project: - -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) - -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. +![Alt text](../../assets/flutter_first_application/favorite_page..png) diff --git a/flutter_samples/flutter_layout_application/README.md b/flutter_samples/flutter_layout_application/README.md index 2330fbd817aca71ade16b93cf858ffab81f32a87..3e6b6f463f65c7cf0f2fd5d51bb9a66981416cb1 100644 --- a/flutter_samples/flutter_layout_application/README.md +++ b/flutter_samples/flutter_layout_application/README.md @@ -2,15 +2,8 @@ A new Flutter project. -## Getting Started +## 项目运行截图 -This project is a starting point for a Flutter application. +![Alt text](../../assets/flutter_layout_application/home.png) -A few resources to get you started if this is your first Flutter project: - -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) - -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. +![Alt text](../../assets/flutter_layout_application/preview.png) diff --git a/flutter_samples/flutter_layout_application/lib/layout/project/columnLayoutProject.dart b/flutter_samples/flutter_layout_application/lib/layout/project/columnLayoutProject.dart new file mode 100644 index 0000000000000000000000000000000000000000..21a1375b1786034b54a8caaeb8c83c015c3be65e --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/layout/project/columnLayoutProject.dart @@ -0,0 +1,177 @@ +import 'package:flutter/material.dart'; + +class ColumnLayoutProject extends StatelessWidget { + const ColumnLayoutProject({super.key}); + + // This widget is the root of your application. + @override + Widget build(BuildContext context) { + return const MyHomePage(title: 'Flutter Demo Home Page'); + } +} + +class TitleSection extends StatelessWidget { + const TitleSection({super.key, required this.name, required this.location}); + + final String name; + final String location; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(32), + child: Row( + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.all(8), + child: Text( + name, + style: const TextStyle(fontWeight: FontWeight.bold), + ), + ), + Text(location, style: TextStyle(color: Colors.grey[500])), + ], + ), + ), + Icon(Icons.star, color: Colors.red[500]), + const Text('41'), + ], + ), + ); + } +} + +class ButtonSection extends StatelessWidget { + const ButtonSection({super.key}); + + @override + Widget build(BuildContext context) { + final Color color = Theme.of(context).primaryColor; + return SizedBox( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + ButtonWithText(color: color, icon: Icons.call, label: 'CALL'), + ButtonWithText(color: color, icon: Icons.near_me, label: 'ROUTE'), + ButtonWithText(color: color, icon: Icons.share, label: 'SHARE'), + ], + ), + ); + } +} + +class TextSection extends StatelessWidget { + const TextSection({super.key, required this.description}); + + final String description; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(32), + child: Text(description, softWrap: true, style: TextStyle(fontSize: 18)), + ); + } +} + +class ButtonWithText extends StatelessWidget { + const ButtonWithText({ + super.key, + required this.color, + required this.icon, + required this.label, + }); + + final Color color; + final IconData icon; + final String label; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(icon, color: color), + Padding( + padding: const EdgeInsets.only(top: 8), + child: Text( + label, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.w400, + color: color, + ), + ), + ), + ], + ); + } +} + +class ImageSection extends StatelessWidget { + const ImageSection({super.key, required this.image}); + + final String image; + + @override + Widget build(BuildContext context) { + return Image.asset(image, width: 600, height: 240, fit: BoxFit.cover); + } +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({super.key, required this.title}); + + // This widget is the home page of your application. It is stateful, meaning + // that it has a State object (defined below) that contains fields that affect + // how it looks. + + // This class is the configuration for the state. It holds the values (in this + // case the title) provided by the parent (in this case the App widget) and + // used by the build method of the State. Fields in a Widget subclass are + // always marked "final". + + final String title; + + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { + @override + Widget build(BuildContext context) { + return Scaffold( + // appBar: AppBar( + // backgroundColor: Theme.of(context).colorScheme.inversePrimary, + // title: Text(widget.title), + // ), + body: const SingleChildScrollView( + child: Column( + children: [ + ImageSection(image: 'images/lake.jpg'), + TitleSection( + name: 'Oeschinen Lake Campground', + location: 'Kandersteg, Switzerland', + ), + ButtonSection(), + TextSection( + description: + 'Lake Oeschinen lies at the foot of the Blüemlisalp in the ' + 'Bernese Alps. Situated 1,578 meters above sea level, it ' + 'is one of the larger Alpine Lakes. A gondola ride from ' + 'Kandersteg, followed by a half-hour walk through pastures ' + 'and pine forest, leads you to the lake, which warms to 20 ' + 'degrees Celsius in the summer. Activities enjoyed here ' + 'include rowing, and riding the summer toboggan run.', + ), + ], + ), + ), + ); + } +} diff --git a/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart b/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart new file mode 100644 index 0000000000000000000000000000000000000000..81264e1ea1e3cd615c9bb0180e1043ecc25603af --- /dev/null +++ b/flutter_samples/flutter_layout_application/lib/layout/singleLayout.dart @@ -0,0 +1,29 @@ +import 'package:flutter/material.dart'; + +import '../main.dart'; + +class SingleLayout extends StatelessWidget { + final CardItem cardItem; // 新增参数 + + const SingleLayout({super.key, required this.cardItem}); + + @override + Widget build(BuildContext context) { + return Center(child: borderedImage()); + } + + Widget borderedImage() { + return Container( + decoration: BoxDecoration( + border: Border.all(color: Colors.black, width: 2.0), + borderRadius: BorderRadius.circular(10.0), + ), + child: Image.asset( + 'images/lake.jpg', + width: 300, + height: 200, + fit: BoxFit.cover, + ), + ); + } +} diff --git a/flutter_samples/flutter_layout_application/lib/main.dart b/flutter_samples/flutter_layout_application/lib/main.dart index cb5d70c1a4c7e478f63324be7754d8fdbb44f51b..a21867567c217169846e964bb4a3c62bfc80b958 100644 --- a/flutter_samples/flutter_layout_application/lib/main.dart +++ b/flutter_samples/flutter_layout_application/lib/main.dart @@ -38,9 +38,7 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State { String _selectedCategory = '首页'; // 默认选中首页 List _cardItems = [ - CardItem(title: '卡片1', content: '这是第一张卡片的内容。', key: 'card1'), - CardItem(title: '卡片2', content: '这是第二张卡片的内容。', key: 'card2'), - CardItem(title: '卡片3', content: '这是第三张卡片的内容。', key: 'card3'), + CardItem(title: 'single', content: '基础 layout', key: 'single'), ]; void _onCategorySelected(String category) { @@ -50,9 +48,7 @@ class _MyHomePageState extends State { switch (category) { case '首页': _cardItems = [ - CardItem(title: '卡片1', content: '这是第一张卡片的内容。', key: 'card1'), - CardItem(title: '卡片2', content: '这是第二张卡片的内容。', key: 'card2'), - CardItem(title: '卡片3', content: '这是第三张卡片的内容。', key: 'card3'), + CardItem(title: 'single', content: '基础 layout', key: 'single'), ]; break; case '设置': @@ -62,20 +58,16 @@ class _MyHomePageState extends State { content: '这是设置页面的第一张卡片的内容。', key: 'setting-card1', ), - CardItem( - title: '设置卡片2', - content: '这是设置页面的第二张卡片的内容。', - key: 'setting-card2', - ), - CardItem( - title: '设置卡片3', - content: '这是设置页面的第三张卡片的内容。', - key: 'setting-card3', - ), ]; break; case '项目': - _cardItems = [CardItem(title: '项目卡片1', content: '列表基础布局', key: '')]; + _cardItems = [ + CardItem( + title: '实战项目一', + content: '基础', + key: 'column_layout_project', + ), + ]; break; default: _cardItems = []; diff --git a/flutter_samples/flutter_layout_application/lib/preview_page.dart b/flutter_samples/flutter_layout_application/lib/preview_page.dart index 30f4636e3e04a98c121a2d28e60ec12e24a1ce87..48901921ee3f15a8d611367e892c059bd45ae14d 100644 --- a/flutter_samples/flutter_layout_application/lib/preview_page.dart +++ b/flutter_samples/flutter_layout_application/lib/preview_page.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:flutter_layout_application/layout/project/columnLayoutProject.dart'; +import 'package:flutter_layout_application/layout/singleLayout.dart'; import 'main.dart'; // 引入 CardItem 类 class PreviewPage extends StatelessWidget { @@ -12,9 +14,18 @@ class PreviewPage extends StatelessWidget { appBar: AppBar( title: Text(cardItem.title), // 使用传递的参数 ), - body: Center( - child: Text(cardItem.content), // 使用传递的参数 - ), + body: Center(child: renderContent()), ); } -} \ No newline at end of file + + // 条件渲染方法 + Widget renderContent() { + if (cardItem.key == 'single') { + return SingleLayout(cardItem: cardItem); + } else if (cardItem.key == 'column_layout_project') { + return ColumnLayoutProject(); + } else { + return Text(cardItem.content); // 根据需求调整逻辑 + } + } +} diff --git a/flutter_samples/flutter_web_application/README.md b/flutter_samples/flutter_web_application/README.md index d40cc5f45c8390cfc28efcaad2c5dd29c87865dc..a67cc8bbf39849647b59748bc516391c3afbd82c 100644 --- a/flutter_samples/flutter_web_application/README.md +++ b/flutter_samples/flutter_web_application/README.md @@ -2,15 +2,6 @@ A new Flutter project. -## Getting Started +## 项目运行截图 -This project is a starting point for a Flutter application. - -A few resources to get you started if this is your first Flutter project: - -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) - -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. +![Alt text](../../assets/flutter_web_application/index.png) diff --git a/flutter_samples/flutter_web_application/test/widget_test.dart b/flutter_samples/flutter_web_application/test/widget_test.dart index 6bdf779740a9e5d9ba4d5a0abf21a188109f560e..661a2d08522ad57a0d9b4cf1f3f086cd9359b5a8 100644 --- a/flutter_samples/flutter_web_application/test/widget_test.dart +++ b/flutter_samples/flutter_web_application/test/widget_test.dart @@ -13,7 +13,7 @@ import 'package:flutter_web_application/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. - await tester.pumpWidget(const MyApp()); + await tester.pumpWidget(MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget);