现在这个时代,技术更新的节奏越来越快,很多时候我们由不得自己,我们非常被动的要去学习很多框架,特别是对于技术栈比较多的朋友。
所以很多时候,我们需要学会善用工具,今天给大家分享一个我自己在学习Flutter过程中,发现的一个网站,在这个网站中,你只需要对控件进行简单的拖拽,他就能帮你生成对应的Dart代码,对与初学者学习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'),
)
]
),
);
}
}
这个工具没有那么完美,但是对于初学者来说,通过它来了解组件,以及他们的属性,还是很有帮助的。更重要的是,拖拽组件生成代码,这可以帮助我们减少学习成本,达到事半功倍的效果。
现在大家都这么忙,挺好的一事儿。果断分享了