疫情刚好静下心来回归过去的工作，博主要开始学习flutter，博主会边学习边实战项目连续连贯实现，大约一周会出一篇，源码地址,开源不易，麻烦动手点星，谢谢，本开源不做商业使用，里面涉及用到api接口资源等只供学习，项目开发会分博客文章，请点击链接到对应的文章中浏览，建议其实万变不离其中，说到底还是离不开原生，学习之前往补充原生知识，本片主要讲的是创建项目、应用图标、启动页，再次感谢大家能耐心观看，谢谢！

Flutter 开始征途

1 创建项目

1.1 studio 创建项目
1.2 flutter 命令创建项目

2 应用图标

2.1 安卓、ios图标对比
2.2 安卓尺寸详解
2.3 ios尺寸详解
2.4 图标运行效果

3 启动页

3.1 安卓、ios启动页对比
3.2 安卓启动页尺寸详解

3.4 安卓启动页实现(解决启动黑白问题)

3.5 ios启动页尺寸详解
3.6 启动页运行效果

1 创建项目

1.1 studio 创建项目

在这里插入图片描述
这里要注意不要大写不支持哦

到这一步就说明创建成功了，记得这个地方有个坑，
2.1flutter run卡在Running Gradle task ‘assembleDebug’…，请查看解决运行不起来

1.2 flutter 命令创建项目

//创建项目
flutter create myapp
//检查设备
flutter devices
//运行命令
flutter run
//打开ios模拟器
open -a Simulator

2 应用图标

2.1 安卓、ios图标对比

在这里插入图片描述

2.2 安卓尺寸详解

安卓应用图标尺寸对应适配，请大家做flutter补一下这些基础知识，做一个精品app所必须技能。
在这里插入图片描述

2.3 ios尺寸详解

以下是ios所对应，请大家做flutter补一下这些基础知识，做一个精品app所必须技能。
在这里插入图片描述

对应项目配置图标文件
在这里插入图片描述

 {
      "size" : "20x20",//尺寸大小
      "idiom" : "iphone",//对应设备
      "filename" : "[email protected]",//对应图片文件名称
      "scale" : "2x"//size*scale=图标的大小
    },

2.4 图标运行效果

在这里插入图片描述
安卓运行

3 启动页

3.1 安卓、ios启动页对比

在这里插入图片描述

3.2 安卓启动页尺寸详解

横屏宽×高

drawable-land-ldpi-screen 200320
drawable-land-mdpi-screen 320480
drawable-land-hdpi-screen 480800
drawable-land-xhdpi-screen 7201280
drawable-land-xxhdpi-screen 9601600
drawable-land-xxxhdpi-screen 12801920
竖屏高×宽

drawable-port-ldpi-screen 320200
drawable-port-mdpi-screen 480320
drawable-port-hdpi-screen 800480
drawable-port-xhdpi-screen 1280720
drawable-port-xxhdpi-screen 1600960
drawable-port-xxxhdpi-screen 19201280

3.4 安卓启动页实现(解决启动黑白问题)

在原生实现启动空白问题怎么解决，最快捷优雅就是设置一个启动样式，里面设置一个背景图片，最核心就是这句话android:windowBackground。

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>

在安卓启动大家都是在清单文件中有个启动intent，然后会是启动的入口，然后会跳到activity上，那么记得一定要设置io.flutter.app.android.SplashScreenUntilFirstFrame
在源码基础上请查看
在这里插入图片描述

<activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

3.5 ios启动页尺寸详解

以下是ios适配启动页的尺寸大小，在ios原生拖进去自动生成Contents.json，然后flutter就是不支持可视图拖动了，但是原理都一样哦，所以还是多多看原生，特别讨厌google这个技术，就是抢原生的饭碗，修改对应文件。

{
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2688h",
      "filename" : "1242x2688.jpg",
      "minimum-system-version" : "12.0",
      "orientation" : "portrait",
      "scale" : "3x"
    }