大家好，我是您的朋友：义县游学电子科技。很高兴您能看到这篇原创文章。今天带来的文章主题是：flutter开发项目，如何进行web平台和移动端平台切换的技巧方法。

文章主题

以前有几篇介绍flutter的文章，分别介绍了如何配置环境，如何使用基本控件。今天我来介绍一下进行flutter开发时，使用Android studio如何进行跨平台快速切换的问题。

首先，按照要求下载Android studio和flutter，然后参考我的这篇文章进行环境配置。配置完成后，对flutter进行web开发支持的切换。详情请参考下我的这篇文章：推荐新技术flutter开发web页面的环境搭建。这篇文章已经非常详细地介绍了如何配置flutter环境变量等内容。如果您已有flutter了，就不必进行任何设置，只要您的环境能用就可以。

2. 其次，如果您的flutter目前不支持web开发，请参考下面的文章进行web切换。如何利用flutter稳定版开发web页。之所以这样做的目的是为了在web平台和移动平台间进行切换。所以你的flutter一定要设置成既支持web端又支持移动端哦。

3. 打开Android studio，观察您的界面。下图是支持web开发的flutter环境模样。

支持web开发的flutter环境模样

如果不是这样子的，那么请你继续执行第二点中文章中的命令进行切换，web支持即可。

4. 打开Android studio。如果您的flutter目前支持web，那么按照图中所示点击1位置的图标打开“安卓虚拟设备管理”窗口。然后点击创建新的虚拟设备，也就是图中2所示的位置按钮。如下图，我创建的是api28的安卓9版本的虚拟设备x86平台。

我创建的是api28的安卓9版本的虚拟设备

5. 如果第4步中的虚拟设备创建好了，恭喜你的是你的flutter已经具备在web和移动端开发调试的功能了。下面就是最关键的一点，如何在flutter的web和移动端切换。

6. web开发。选择调试工具为chrome(web)，再次点击运行或调试按钮即可，此时flutter就会自动打开谷歌web浏览器进行页面的显示。如下图。

打开谷歌web浏览器进行页面的显示

7. 移动开发。点击Android studio的1位置，打开虚拟设备管理窗口。然后点击运行虚拟设备，这时就会打开一个手机的模拟器。如下图。

打开一个手机的模拟器

如果你仔细观察调试工具窗口，会出现下图所示的移动模拟器。

会出现图所示的移动模拟器

然后点击调试按钮即可进行，flutter在移动端的显示工作。为了对比，我在web浏览器中显示的页面和移动端显示的页面是同一个页面。见下图：

flutter在移动端的显示工作

7. 这时，你想从新进行web浏览器的开发怎么做呢？就非常简单了，直接关闭调试按钮即可。至于模拟器你关不关都可以的，这没有影响，只是占用cpu资源而已。然后选择调试工具为chrome(web)，再次点击运行或调试按钮即可。如下图

选择调试工具为chrome(web)，再运行

最后，以上就是flutter进行跨平台开发的直接使用技巧，而不用来回使用命令行"flutter config --enable-web"进行切换了。非常简单方便快捷，直接在Android stuido中就可以完成跨端开发。

想了解更多精彩内容，快来关注义县游学电子科技