使用合适的工具，助你学习FLutter事半功倍

如今这个时代，技术更新的节奏愈来愈快，不少时候咱们由不得本身，咱们很是被动的要去学习不少框架，特别是对于技术栈比较多的朋友。

因此不少时候，咱们须要学会善用工具，今天给你们分享一个我本身在学习Flutter过程当中，发现的一个网站，在这个网站中，你只须要对控件进行简单的拖拽，他就能帮你生成对应的Dart代码，对与初学者学习Flutter的控件仍是很是有帮助的。不想看我废话的，能够直接去网站上探索

传送门：Flutter实验室

这个网站可帮助咱们干什么？

• 他对组件进行了分类，咱们能够很直观的看到组件有哪几类

• 拖拽组件布局，实时查看效果，而且帮你生成Dart代码

• 能够直接在上面修改组件属性，它继续帮你生成相应的代码

• 能够切换显示设备，安卓，苹果主流机型都有

听起来是否是很酷？让们实际来看一下gif图

这是它直接帮咱们生成的代码

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
        bottomNavigationBar: new BottomNavigationBar(
          items: [
            new BottomNavigationBarItem(
              icon: const Icon(Icons.account_circle),
              title: new Text('Me'),
            ),
    
            new BottomNavigationBarItem(
              icon: const Icon(Icons.add_location),
              title: new Text('Title'),
            )
          ]
    
        ),
      );
    }
}

复制代码

这个工具没有那么完美，可是对于初学者来讲，经过它来了解组件，以及他们的属性，仍是颇有帮助的。更重要的是，拖拽组件生成代码，这能够帮助咱们减小学习成本，达到事半功倍的效果。

如今你们都这么忙，挺好的一事儿。果断分享了