Flutter 的核心就是元件 也就是Widget 所以記住核心才能開發好app呀

案列 1  在螢幕中間顯示hello

import 'package:flutter/material.dart';



void main(){
runApp(
  Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
      ),
  
  )
);
}

案列2 自定義小部件Widget

import 'package:flutter/material.dart';


void main()=>runApp(App());



class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
      ),
  
  );
  }
  
}
 

案列3 文字的樣式TextStyle

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.yellow
     ),
      ),
  
  );
  }
  
}
 

案列4  MaterialApp：使用介面元件與定製介面主題

import 'package:flutter/material.dart';
import 'model/post.dart';


void main()=>runApp(App());



class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('app Bar'),
          // 陰影
          elevation: 0.0,
        ),
        body: Hello(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}



class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );;
  }

}
 

案列5 列表 準備資料

下面寫一個ListView

我們把資料提前準備好

lib下新建 model/post.dart

內容如下

class Post{
  const Post({
    this.title,
    this.author,
    this.imgeUrl,
  });
  final String title;
  final String author;
  final String imgeUrl;
}

final List<Post> posts=[
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  ),
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  ),
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  ),
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  ),
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  ),
  Post(
    title:'天天練',
    author:'Mohamed Chahin',
    imgeUrl:'http://www.liuan.mobi/static/image/default_title.png',
  )
 
];

main.dart新建一個widget 把home 提取出來

然後寫一個簡單的listView

列表檢視：ListView.builder

import 'package:flutter/material.dart';
import 'model/post.dart';


void main()=>runApp(App());



class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}



class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

class Home extends StatelessWidget{
  Widget _listItemBuilder(BuildContext context,int index){
    return Text(posts[index].title);
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('app Bar'),
          // 陰影
          elevation: 0.0,
        ),
        body: ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        ),
      );
  }

}

案列 列表專案 繼續優化細節

import 'package:flutter/material.dart';
import 'model/post.dart';


void main()=>runApp(App());



class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow
      ),
    );
  }
  
}



class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

class Home extends StatelessWidget{
  Widget _listItemBuilder(BuildContext context,int index){
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(posts[index].imgeUrl),
          SizedBox(height: 16.0), 
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.title,
          ),
          Text(
            posts[index].author,
            style: Theme.of(context).textTheme.subhead,
          ),
           SizedBox(height: 16.0), 
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('app Bar'),
          // 陰影
          elevation: 0.0,
        ),
        body: ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        ),
      );
  }

}