一、Hello World的实现

  1. fim(flutter import material.dart)  //引入material.dart库
  2. 定义main方法(dart入口方法)
  3.   void main(){
  4.         runApp(MyApp())   //runApp(flutter入口方法)
  5. }
  6. //定义一个自定义组件
  7. class MyApp extends StatelessWidget{
  8.   @override
  9.   Widget build(BuildContext context) {
  11.     return MaterialApp(   //调用MaterialApp组件
  12.       home:Scaffold(        //home主页用Scaffold脚手架来装饰
  13.           appBar:AppBar(
  14.             title:Text('Welcome to flutter'),
  15.         )
  16.         body:Center(
  17.             child:Text(
  18.               'hello world',
  19.             style: TextStyle(
  20.               color: Colors.red,
  21.               ),
  22.           ),
  23.         ),
  24.       ),
  25.       theme:ThemeData(        //更改主题颜色
  26.         primarySwatch: Colors.green
  27.       ),
  28.     );
  29.   }
  30. }

二、循环列表ListView

  1. class HomeContent extends StatelessWidget{
  3.   List _getData(){
  4.     List<Widget> list = new List();
  5.     for(var i=0;i<10;i++){
  6.       list.add(
  7.         ListTile(
  8.           title: Text("我是$i列表"),
  9.         ),
  10.       );
  11.     }
  12.     return list;
  13.   }
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     // TODO: implement build
  18.     return ListView(
  19.       children: this._getData()
  20.     );
  21.   }
  22. }
  24. 动态列表
  25.   List<Widget> _getData(){
  26.     var templist = ListData.map((value){
  27.       return ListTile(
  28.         leading: Image.network(value["ImgUrl"]),
  29.         title: Text(value["title"]),
  30.         subtitle: Text(value["title"]),
  31.       );
  32.     });
  33.     return templist.toList();
  34.   }