这篇文档记录了从显示简单文字到一个简单的列表项目页面。
在屏幕中央显示“hello flutter!”
import 'package:flutter/material.dart';
void main(List args) {
runApp(Center(
child: Text(
'hello flutter!',
textDirection: TextDirection.ltr,
),
));
}
自定义小部件(Widget)
import 'package:flutter/material.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'自定义小部件',
textDirection: TextDirection.ltr,
),
);
}
}
文字的样式:TextStyle
import 'package:flutter/material.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'自定义小部件',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 44,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
);
}
}
MaterialApp:使用界面组件与定制界面主题
import 'package:flutter/material.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('主页'),
elevation: 0.0, // 设置AppBar的阴影
),
body: HelloFlutter(),
),
theme: ThemeData(primarySwatch: Colors.yellow), // 设置AppBar的主题背景颜色
);
}
}
/// 自定义小部件
class HelloFlutter extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'hello flutter!',
textDirection: TextDirection.ltr, // 设置文字方向
style: TextStyle(
// 设置Text样式
fontSize: 44,
fontWeight: FontWeight.w700,
color: Colors.black45,
),
),
);
}
}
列表:准备数据
lib目录下创建一个文件夹model,然后在model文件夹里面创建post.dart。在post.dart里面定义类Post,Post里面的内容如下:
class Post {
Post({
this.title,
this.author,
this.imageUrl,
this.description,
});
final String title;
final String author;
final String imageUrl;
final String description;
bool selected = false;
}
final List posts = [
Post(
title: 'Candy Shop',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F173752vhyyav5znjdyy5yz.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621328749&t=8c2b4fd772155f43e29cde37c48ab4e9',
),
Post(
title: 'Childhood in a picture',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcn.bing.com%2Faz%2Fhprichbg%2Frb%2FSouthMoravian_ZH-CN13384331455_1920x1080.jpg&refer=http%3A%2F%2Fcn.bing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329081&t=522d12f38e566f41be7ba75ec942e5f2',
),
Post(
title: 'Contained',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fabc.2008php.com%2F2012_Website_appreciate%2F2012-02-12%2F20120212033955.jpg&refer=http%3A%2F%2Fabc.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329046&t=4c5f587ada43b368c5c012d490b7904f',
),
Post(
title: 'Dragon',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F01.minipic.eastday.com%2F20170411%2F20170411144936_5669199a3b41cfab6297657faaa10fcf_4.jpeg&refer=http%3A%2F%2F01.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329025&t=9471e16370e49e86b204c2f0a3e7134d',
),
Post(
title: 'Free Hugs',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F01.minipic.eastday.com%2F20170406%2F20170406160424_4d1b428f75f354a05977978cb8aefdb4_2.jpeg&refer=http%3A%2F%2F01.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329002&t=421a8c2d1e8bc00e8826bd21a4bd1db9',
),
Post(
title: 'Gravity Falls',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F24%2F215347n3kjpxpj3220jj9r.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621328896&t=7241dd334a53895a76ad9306cd5fcbaf',
),
Post(
title: 'Icecream Truck',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F28%2F201323nkb33qbuccqukk45.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621328826&t=d3fd71ba85c3fb396ce4860ad7a6ba0b',
),
Post(
title: 'keyclack',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F24%2F145941k3r6rq36yqykp22r.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329269&t=21e1ce03b0cbe6f8155e176429faa526',
),
Post(
title: 'Overkill',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180410%2F72b440634b454849b63b37910a2a3e12.jpg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329303&t=6f1e96eecf0ae5f02479f677868aee0c',
),
Post(
title: 'Say Hello to Barry',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbenyouhuifile.it168.com%2Fforum%2Fmonth_0607%2Ffg16004008_ucjaRdoEZaHx_uIN4BVFR1hJT.jpg&refer=http%3A%2F%2Fbenyouhuifile.it168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329334&t=cbc3eb3afebf56896a281658daff6ee4',
),
Post(
title: 'Space Skull',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F88%2Ff8%2Fd8%2F88f8d8e93453abd8c36cc659d56f6da0.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329367&t=0c49d635d24d6e3097c35258949ed66e',
),
Post(
title: 'The Old Fashioned',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201512%2F03%2F161144zxzzh2r55wn0ptjr.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329412&t=ebcf29dd5e86a2d75f10f9a89f450659',
),
Post(
title: 'Tornado',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20170822%2F20170822170818_d41d8cd98f00b204e9800998ecf8427e_6.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329452&t=722b8c52ae55d9457b3425cd8afc32aa',
),
Post(
title: 'Undo',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201310%2F18%2F210439rsz0mq3c3odog7ox.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329485&t=be39d1d672571e8b3aba51e20d0b921a',
),
Post(
title: 'White Dragon',
author: 'Mohamed Chahin',
description:
'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
imageUrl:
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F17%2F174124tp3sa6vvckc25oc8.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621329551&t=38e6d7411b330620b7725c2fdcebcf50',
)
];
列表视图:ListView.builder
import 'package:flutter/material.dart';
import 'model/post.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: HomePage(),
theme: ThemeData(primarySwatch: Colors.yellow), // 设置AppBar的主题背景颜色
);
}
}
class HomePage 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('主页'),
elevation: 0.0, // 设置AppBar的阴影
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
列表项目
import 'package:flutter/material.dart';
import 'model/post.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: HomePage(),
theme: ThemeData(primarySwatch: Colors.yellow), // 设置AppBar的主题背景颜色
);
}
}
class HomePage extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.cyan[100],
margin: EdgeInsets.all(10.0),
child: Column(
children: [
Image.network(posts[index].imageUrl),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6,
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
),
SizedBox(height: 16.0),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.red[100],
appBar: AppBar(
title: Text('主页'),
elevation: 0.0, // 设置AppBar的阴影
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
项目页面自定义小部件
将上面文档里面的demo,分别写在两个demo里面,方便后面页面的调试练习。
第一个最简单的显示hello文字的demo
demo页面
import 'package:flutter/material.dart';
class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'hello',
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 44,
fontWeight: FontWeight.bold,
color: Colors.deepOrange),
),
);
}
}
调用页面
import 'package:flutter/material.dart';
import './demo/hello_demo.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
theme: ThemeData(primarySwatch: Colors.yellow), // 设置AppBar的主题背景颜色
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.red[100],
appBar: AppBar(
title: Text('主页'),
elevation: 0.0, // 设置AppBar的阴影
),
body: Hello(),
);
}
}
第二个项目列表的demo
demo页面
import 'package:flutter/material.dart';
import '../model/post.dart';
class ListViewDemo extends StatelessWidget {
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.cyan[100],
margin: EdgeInsets.all(10.0),
child: Column(
children: [
Image.network(posts[index].imageUrl),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.headline6,
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subtitle1,
),
SizedBox(height: 16.0),
],
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}
调用页面
import 'package:flutter/material.dart';
import './demo/listview_demo.dart';
void main(List args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
theme: ThemeData(primarySwatch: Colors.yellow), // 设置AppBar的主题背景颜色
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.red[100],
appBar: AppBar(
title: Text('主页'),
elevation: 0.0, // 设置AppBar的阴影
),
body: ListViewDemo(),
);
}
}