日更挑战-Flutter尝试

越不懂的越爱装

大家都同等:IT世界没有难不难,只有是否了解过

挑战目录

Flutter是什么

是一种在编译期将dart代码转换成原生代码的跨平台原生应用开发框架。

搭建Flutter开发环境

• 使用梯子或使用镜像下载Flutter SDK，去flutter官网下载其最新可用的安装包，或者去flutter的github上下载其最新可用的安装包。
• 解压安装包到你想安装的目录
• android studio下载flutter插件
• 重启
• 在android studio的设置，搜索flutter设置flutter sdk为刚刚下载的地址

创建Flutter项目

• 选择菜单 File-New-New Flutter Project...

• image-20210618014745798.png

• 点击next进行配置

Flutter初始项目

1. main方法
   通过runApp方法传入一个Widget，显示对于Widget视图的App。
   这里的MyApp()是一个Widget。

   void main() {
     runApp(MyApp());
   }
   

2. MyApp():无状态StatelessWidget
   定义一个MyApp继承自StatelessWidget。

   StatelessWidget:一个不需要状态更改的widget
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp( //定义主题和内容MyHomePage
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

3. MyHomePage:有状态StatefulWidget

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Text(
                 'You have pushed the button this many times:',
               ),
               Text(
                 '$_counter',
                 style: Theme.of(context).textTheme.headline4,
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: Icon(Icons.add),
         ), // This trailing comma makes auto-formatting nicer for build methods.
       );
     }
   }
   

其他

由于一些原因，需要开始flutter的学习。根据了解。还需要学习如下知识点：
flutter组件相关：这点想着用开源项目进行学习apk
flutter插件开发：这个据现在的浅薄了解掌握的话应该不难，刷个全教学视频应该差不多
flutter组件化开发：打算借助网络博客和实践进行基于aar的flutter组件化开发的学习