使用合適的工具，助你學習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'),
            )
          ]
    
        ),
      );
    }
}

複製代碼

這個工具沒有那麼完美，可是對於初學者來講，經過它來了解組件，以及他們的屬性，仍是頗有幫助的。更重要的是，拖拽組件生成代碼，這能夠幫助咱們減小學習成本，達到事半功倍的效果。

如今你們都這麼忙，挺好的一事兒。果斷分享了