慕课甄选-2024年Flutter零基础极速入门到进阶实战
核心代码，注释必读
// download：
3w ukoou com
慕课甄选-2024年Flutter零基础极速入门到进阶实战 Flutter介绍
Flutter 是 Google 推出的全新跨平台移动开发框架。因为出色的性能、高效的开发方式等原因，Flutter 正被越来越多的开发者和组织采用，比如阿里巴巴、腾讯、京东、美团等。
其实，Flutter 并没有开创新的概念，它背后的框架原理和底层设计思想，与原生 Android/iOS 开发并没有本质区别，甚至从 React Native 中吸收了不少优秀的设计理念。同时，它使用的 Dart 语言，也吸纳了其他编程语言（比如 Java、JavaScript）的优秀思想。
2024年Flutter零基础极速入门到进阶实战 - Flutter中创建一个搜索栏
设置一个Flutter示例应用程序
第一步是使用Flutter创建命令创建一个新项目。
lua
复制代码
flutter create search_bar
接下来，我们需要清除main.dart 文件中的内容，并创建一个新的MaterialApp 。
scala
复制代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Material App',
home: HomeScreen(),
);
}
}
我们在这个应用中使用Material Design，以使其更容易设置；我们的主要重点将是创建搜索栏，而不是设计应用本身。
现在让我们创建一个新的有状态的小部件，命名为HomeScreen ，并将其传递给MaterialApp 的主页属性。
scala
复制代码
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Personal Journal'),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Center(
child: Text('Hi'),
),
],
),
);
}
}
你会注意到我在上面的代码中给这个应用程序添加了一些细节，包括一个appBar 和一个title 。再一次，这些都是不太重要的添加物，我们可以忽略，而专注于创建搜索栏，但如果你在本教程中练习你的应用程序构建技能，可能会派上用场。
创建一个搜索按钮
下一步是创建搜索按钮。AppBar 为我们提供了一个名为actions 的属性，我们可以用这个集合来列出各种活动。
php
复制代码
appBar: AppBar(
title: const Text('My Personal Journal'),
automaticallyImplyLeading: false,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
)
],
centerTitle: true,
),
因为我们正在制作一个按钮，当它被点击时显示一些东西（搜索栏），我们将使用IconButton 小部件。这个部件在被按下时将产生一个小动画，表明用户的选择被应用注册了。我们向icon 参数传递名称；你可以在下面的图片中看到，我选择了放大镜的图标来代表 "搜索"。
