Implement a Column that contains two text widgets:
The first Text widget has the name Flutter McFlutter and the style property set to Theme.of(context).textTheme.headline5.
The second Text widget contains the title Experienced App Developer.
For the Column, set mainAxisSize to MainAxisSize.min and crossAxisAlignment to CrossAxisAlignment.start.
👩🏻💻 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Flutter McFlutter',
style: Theme.of(context).textTheme.headline5,
),
Text(
'Experienced App Developer',
),
],
);
}
}
👇🏻 결과 화면
Wrap the Column you implemented in a Row that contains the following widgets:
- An Icon widget set to Icons.account_circle and with a size of 50 pixels.
- A Padding widget that creates a space of 8 pixels around the Icon widget.
To do this, you can specify const EdgeInsets.all(8.0) for the padding property.
👩🏻💻 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.account_circle, size:50),
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Flutter McFlutter',
style: Theme.of(context).textTheme.headline5,
),
Text('Experienced App Developer'),
],
),
],
);
}
}
👇🏻 결과 화면
Wrap the Row in a Column that has a mainAxisSize property set to MainAxisSize.min and a crossAxisAlignment property set to CrossAxisAlignment.stretch. The Column contains the following widgets:
- A SizedBox widget with a height of 8.
- An empty Row where you’ll add the contact information in a later step.
- A second SizedBox widget with a height of 16.
- A second empty Row where you’ll add four icons (Part 3).
👩🏻💻 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.account_circle, size: 50),
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Flutter McFlutter',
style: Theme.of(context).textTheme.headline5,
),
Text('Experienced App Developer'),
],
),
],
),// Row
SizedBox(height: 8),
Row(), // First empty Row
SizedBox(height: 16),
Row(), // Second empty Row
],
); // Closing parenthesis for the Column that wraps the Row
}
}
👇🏻 결과 화면
Enter two Text widgets inside the first empty Row:
The first Text widget contains the address 123 Main Street.
The second Text widget contains the phone number (415) 555-0198.
For the first empty Row, set the mainAxisAlignment property to MainAxisAlignment.spaceBetween.
👩🏻💻 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.account_circle, size: 50),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Flutter McFlutter',
style: Theme.of(context).textTheme.headline5,
),
Text('Experienced App Developer'),
],
),
],
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'123 Main Street',
),
Text(
'(415) 555-0198',
),
],
),
SizedBox(height: 16),
Row(
children: [],
),
],
);
}
}
👇🏻 결과 화면
Enter the following Icon widgets inside the second empty Row:
- Icons.accessibility
- Icons.timer
- Icons.phone_android
- Icons.phone_iphone
For the second empty Row, set the mainAxisAlignment property to MainAxisAlignment.spaceAround.
👩🏻💻 코드
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.account_circle, size: 50),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Flutter McFlutter',
style: Theme.of(context).textTheme.headline5,
),
Text('Experienced App Developer'),
],
),
],
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('123 Main Street'),
Text('415-555-0198'),
],
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
Icons.accessibility,
),
Icon(
Icons.timer,
),
Icon(
Icons.phone_android,
),
Icon(
Icons.phone_iphone,
),
],
),
],
);
}
}
👇🏻 결과 화면