Wir beginnen die neue Woche mit einer weiteren Interpretation der offiziellen Flutter-Dokumentation in einem Frage-Antwort-Format. Teil 4 behandelt Flatters Vergleichsstil für Webentwickler. Es widmet sich ausschließlich dem Layout und ist nicht so umfangreich wie die vorherigen. Traditionell empfehle ich allen an Flutter interessierten Webentwicklern, unter die Katze zu schauen, ob es sich lohnt, dieses Framework auszuprobieren, und wie viel Aufwand es erfordert.
Wenn hier nicht genügend Informationen vorhanden sind oder Sie Erfahrung in der nativen Entwicklung für eine bestimmte Plattform haben, empfehle ich, andere Teile zu untersuchen:Flattern. Teil 1. Für Android-EntwicklerFlutter. Teil 2. Für iOS-EntwicklerFlutter. Teil 3. Für Entwickler von React NativeFlutter. Teil 4. Für Flutter- Webentwickler. Teil 5. Für Xamarin.Forms-EntwicklerInhalt:
- Grundlayout
- Positionen und Größen
- Die Form
- Text
Grundlayout
Frage:
Wie kann man Text stylen und ausrichten?Antworten:
Verwenden von TextStyle .Beispiel:
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
Flatternvar container = Container(
child: Text(
"Lorem ipsum",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage:
Wie wird die Hintergrundfarbe eingestellt?Antworten
Verwenden der BoxDecoration- Klasse .Unterschiede
Eine Eigenschaft background-color
in CSS ist nur für die Hintergrundfarbe verantwortlich. BoxDecoration ist für ein breiteres Spektrum von Eigenschaften verantwortlich, wie z. B. Abrunden von Ecken, Kanten usw.Beispiel
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
Flatternvar container = Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
width: 320,
height: 240,
decoration: BoxDecoration(
color: Colors.grey[300],
),
);
Frage:
Wie zentriere ich die Komponenten?Antworten
Verwenden des Center- Widgets .Beispiel
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
Flatternvar container = Container(
child: Center(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage:
Wie stelle ich die Behälterbreite ein?Antworten
Eigenschaft verwenden width
.Unterschiede
Flatter-Widgets haben eine width
feste Eigenschaft . Verwenden Sie zum Konfigurieren maxWidth
oder minWidth
Verwenden des BoxConstraints- Widgets .Beispiel:
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
width: 100%;
max-width: 240px;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
width: 240,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Positionen und Größen
Frage
Wie etabliere ich eine absolute Position?Antworten
Verwenden des positionierten Widgets im Stapel- Widget .Weitere Informationen
Standardmäßig werden Widgets in übergeordneten Widgets positioniert.Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
position: relative;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
position: absolute;
top: 24px;
left: 24px;
}
Flatternvar container = Container(
child: Stack(
children: [
Positioned(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
left: 24,
top: 24,
),
],
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie stelle ich die Drehung der Komponenten ein?Antworten
Verwenden des Transformations- Widgets .Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
transform: rotate(15deg);
}
Flatternvar container = Container(
child: Center(
child: Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie skaliere ich Komponenten?Antworten
Verwenden des Transformations- Widgets .Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
transform: scale(1.5);
}
Flatternvar container = Container(
child: Center(
child: Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
alignment: Alignment.center,
transform: Matrix4.identity()
..scale(1.5),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie wende ich einen Farbverlauf an?Antworten
Verwenden der BoxDecoration- Klasse und ihrer Eigenschaften gradient
.Beispiel
Vertikaler linearerHTML / CSS-Verlauf<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: const Alignment(0.0, -1.0),
end: const Alignment(0.0, 0.6),
colors: <Color>[
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Horizontaler linearerHTML / CSS-Verlauf<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: const Alignment(-1.0, 0.0),
end: const Alignment(0.6, 0.0),
colors: <Color>[
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Die Form
Frage
Wie man Ecken abrundet?Antworten
Verwenden der BoxDecoration- Klasse und ihrer Eigenschaften borderRadius
.Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
border-radius: 8px;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
borderRadius: BorderRadius.all(
const Radius.circular(8),
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie füge ich einen Schatten hinzu?Antworten
Verwenden der BoxShadow- Klasse .Weitere Informationen
BoxShadow wird als Teil boxShadow
der BoxDecoration- Klasseneigenschaft verwendet .Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.5);
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
boxShadow: [
BoxShadow (
color: const Color(0xcc000000),
offset: Offset(0, 2),
blurRadius: 4,
),
BoxShadow (
color: const Color(0x80000000),
offset: Offset(0, 6),
blurRadius: 20,
),
],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
decoration: BoxDecoration(
color: Colors.grey[300],
),
margin: EdgeInsets.only(bottom: 16),
);
Frage
Wie macht man runde und elliptische Formen?Antworten
Verwenden der BoxShape-enum
Klasse .Weitere Informationen
BoxShape wird als Teil der Shape-Eigenschaft der BoxDecoration- Klasse verwendet .Beispiel
HTML / CSS<div class="greybox">
<div class="redcircle">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redcircle {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
text-align: center;
width: 160px;
height: 160px;
border-radius: 50%;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
shape: BoxShape.circle,
),
padding: EdgeInsets.all(16),
width: 160,
height: 160,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Text
Frage
Wie stelle ich den Abstand zwischen den Texten ein?Antworten
Verwenden der TextStyle- Klasse und ihrer Eigenschaften letterSpacing
und wordSpacing
.Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
letter-spacing: 4px;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900,
letterSpacing: 4,
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie formatiere ich einen Teil des Textes?Antworten
Verwenden des RichText- Widgets und der TextSpan- Klasse .Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem <em>ipsum</em>
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
}
.redbox em {
font: 300 48px Roboto;
font-style: italic;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: RichText(
text: TextSpan(
style: bold24Roboto,
children: <TextSpan>[
TextSpan(text: "Lorem "),
TextSpan(
text: "ipsum",
style: TextStyle(
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
fontSize: 48,
),
),
],
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Frage
Wie kann die Anzeige von Langtext eingeschränkt werden?Antworten
Mit Hilfe der Widgets maxLines
und des Text-overflow
Widgets .Beispiel
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum dolor sit amet, consec etur
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Flatternvar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum dolor sit amet, consec etur",
style: bold24Roboto,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Ende Dezember 2019, mit der Veröffentlichung von Flutter 1.12, ging der Web-Support in die Beta! Und das sind großartige Neuigkeiten, was bedeutet, dass wir in naher Zukunft zunehmend Websites sehen werden, die in Flutter geschrieben wurden. Wenn Sie noch in Gedanken sind, empfehle ich daher, dieses Framework auszuprobieren, und ich hoffe, dass mein Artikel hilfreich war. Und das ist alles für heute. Möge Google Ihr Chrome nicht beschädigen!