In this era, the pace of technological update is getting faster and faster. Most of the time, we can not help ourselves. We are very passive to learn many frameworks, especially for friends who have a lot of technology stack.

So many times, we need to learn to use tools, today, to share a myself in the process of learning to Flutter, found a web site, in this website, you only need to simple drag-and-drop controls, he can help you to generate the corresponding Dart code, for beginners learning Flutter control is very helpful. Don’t want to see my nonsense, you can go directly to the website to explore

Portal: Flutter LABS

What does this website help us with?

  • He classifies the components, and we can see the categories of components intuitively

  • Drag and drop component layouts to see them in real time, and help you generate the Dart code

  • You can modify component properties directly from above, and it continues to generate the corresponding code for you

  • You can switch display devices, Android, Apple mainstream models have

Doesn’t that sound cool? Let’s actually look at the GIF

This is the code that it generated directly for us

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'() [(), (). }}Copy the code

This tool is not perfect, but it is useful for beginners to learn about components and their properties. More importantly, drag-and-drop components generate code, which helps us reduce learning costs and achieve more with less effort.

It’s a good thing everyone’s so busy these days. Decisively shared