Scroll View ListView mit Flutter 2

Cards in Flutter sind gedacht für die optische Darstellung einer überschaubaren Anzahl von Informationen. Während ich mir im ersten Teil das grundsätzliche angeschaut habe, waren mir jetzt die abgerundeten Ecken der Designelemente wichtig.
Beim erstellen des Codes ist mir aufgefallen, das mir noch einiges nicht ganz klar ist, vor allem im Umgang mit Bildern, sprich Icons.

Beim Card Widget erhält man die abgerundeten Ecken über folgenden Code:

shape: RoundedRectangleBorder

Wobei hier shape eine Eigenschaft der Card Klasse ist. Beim Bild selbst, kann man das gleiche über folgenden Code erreichen:

child:ClipRRect(...child:Image.asset(...)..borderRadius:..)

Obwohl im Code alle Card Widgets die gleichen Werte besitzen, was Padding etc angeht, werden sie in unterschiedlichen Dimensionen angezeigt. Das ist etwas, was ich noch genauer anschauen muss und will :-)) Vielleicht mache ich das alles, aber auch viel zu kompliziert.. Hier der Code:

Das Ergebnis meiner Bemühungen:

	import 'package:flutter/material.dart';
	import 'widgets.dart';
	void main() => runApp(Tut08());
	class Tut08 extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home: HauptSeite(title: 'Tut_08'),
	);
	}
	}
	class HauptSeite extends StatelessWidget {
	HauptSeite({Key key, this.title}) : super(key: key);
	final String title;
	final Color meineFarbe = const Color(0xffcce8f2);
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: ListView(
	scrollDirection: Axis.vertical,
	children: <Widget>[
	contOne,
	contTwo,
	contThree,
	],
	)
	);
	}
	}

view raw tut08.dart hosted with ❤ by GitHub

	import 'package:flutter/material.dart';
	final Color meineFarbe = const Color(0xffcce8f2);
	Widget contOne = Container(
	padding: EdgeInsets.all(5),
	child: new Card(
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(15),
	),
	elevation: 5.0,
	color: meineFarbe,
	child: new Column(
	children: <Widget>[
	ClipRRect(
	child: Container(
	padding: EdgeInsets.all(10),
	child: ClipRRect(
	child: Image.asset("bilder/zuerich.png"),
	borderRadius: BorderRadius.circular(15),
	),
	),
	borderRadius: BorderRadius.circular(15),
	),
	new Padding(
	padding: const EdgeInsets.all(4.0),
	child: Text(
	"Mein Zürich",
	),
	),
	],
	),
	),
	);
	Widget contTwo = Container(
	padding: EdgeInsets.all(5),
	child: new Card(
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(15),
	),
	elevation: 5.0,
	color: meineFarbe,
	child: new Column(
	children: <Widget>[
	ClipRRect(
	child: Container(
	padding: EdgeInsets.all(10),
	child: ClipRRect(
	child: Image.asset("bilder/london.png"),
	borderRadius: BorderRadius.circular(15),
	),
	),
	borderRadius: BorderRadius.circular(15),
	),
	new Padding(
	padding: const EdgeInsets.all(4.0),
	child: Text(
	"Dein London",
	),
	),
	],
	),
	),
	);
	Widget contThree = Container(
	padding: EdgeInsets.all(5),
	child: new Card(
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(15),
	),
	elevation: 5.0,
	color: meineFarbe,
	child: new Column(
	children: <Widget>[
	ClipRRect(
	child: Container(
	padding: EdgeInsets.all(10),
	child: ClipRRect(
	child: Image.asset("bilder/newyork.png"),
	borderRadius: BorderRadius.circular(15),
	),
	),
	borderRadius: BorderRadius.circular(15),
	),
	new Padding(
	padding: const EdgeInsets.all(4.0),
	child: Text(
	"Ihr New York",
	),
	),
	],
	),
	),
	);

view raw widgets.dart hosted with ❤ by GitHub