效果图
Jietu20190213-053655@2x.jpg
地址
https://github.com/samarthagarwal/FlutterAwesomeList
代码
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
var COLORS = [
Color(0xFFEF7A85),
Color(0xFFFF90B3),
Color(0xFFFFC2E2),
Color(0xFFB892FF),
Color(0xFFB892FF)
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Awesome List'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var data = [
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/200?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/100?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/150?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/125?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/175?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/225?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/250?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/350?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/275?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/300?random"
},
{
"title": "Hey Flutterers, See what I did with Flutter",
"content": "This is just a text description of the item",
"color": COLORS[new Random().nextInt(5)],
"image": "https://picsum.photos/325?random"
}
];
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: new Text(
widget.title,
style: TextStyle(color: Colors.white),
),
),
body: new Stack(
children: <Widget>[
new Transform.translate(
offset: new Offset(0.0, MediaQuery.of(context).size.height * 0.1050),
child: new ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(0.0),
scrollDirection: Axis.vertical,
primary: true,
itemCount: data.length,
itemBuilder: (BuildContext content, int index) {
return AwesomeListItem(
title: data[index]["title"],
content: data[index]["content"],
color: data[index]["color"],
image: data[index]["image"]);
},
),
),
new Transform.translate(
offset: Offset(0.0, -56.0),
child: new Container(
child: new ClipPath(
clipper: new MyClipper(),
child: new Stack(
children: [
new Image.network(
"https://picsum.photos/800/400?random",
fit: BoxFit.cover,
),
new Opacity(
opacity: 0.2,
child: new Container(color: COLORS[0]),
),
new Transform.translate(
offset: Offset(0.0, 50.0),
child: new ListTile(
leading: new CircleAvatar(
child: new Container(
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
image: new DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/3234592?s=460&v=4"),
),
),
),
),
title: new Text(
"Samarth Agarwal",
style: new TextStyle(
color: Colors.white,
fontSize: 24.0,
letterSpacing: 2.0),
),
subtitle: new Text(
"Lead Designer",
style: new TextStyle(
color: Colors.white,
fontSize: 12.0,
letterSpacing: 2.0),
),
),
),
],
),
),
),
)
],
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path p = new Path();
p.lineTo(size.width, 0.0);
p.lineTo(size.width, size.height / 4.75);
p.lineTo(0.0, size.height / 3.75);
p.close();
return p;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return true;
}
}
class AwesomeListItem extends StatefulWidget {
String title;
String content;
Color color;
String image;
AwesomeListItem({this.title, this.content, this.color, this.image});
@override
_AwesomeListItemState createState() => new _AwesomeListItemState();
}
class _AwesomeListItemState extends State<AwesomeListItem> {
@override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
new Container(width: 10.0, height: 190.0, color: widget.color),
new Expanded(
child: new Padding(
padding:
const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
widget.title,
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
new Padding(
padding: const EdgeInsets.only(top: 16.0),
child: new Text(
widget.content,
style: TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
new Container(
height: 150.0,
width: 150.0,
color: Colors.white,
child: Stack(
children: <Widget>[
new Transform.translate(
offset: new Offset(50.0, 0.0),
child: new Container(
height: 100.0,
width: 100.0,
color: widget.color,
),
),
new Transform.translate(
offset: Offset(10.0, 20.0),
child: new Card(
elevation: 20.0,
child: new Container(
height: 120.0,
width: 120.0,
decoration: new BoxDecoration(
color: Colors.white,
border: Border.all(
width: 10.0,
color: Colors.white,
style: BorderStyle.solid),
image: DecorationImage(
image: NetworkImage(widget.image),
)),
),
),
),
],
),
),
],
);
}
}
