Menu
CoddyTech

Визитная карточка: стиль

Часть раздела Ваше первое приложение путешествия по Flutter на Coddy. Урок 31 из 32.

Все части на месте. Теперь оформи их как карточку: имя должно первым привлекать взгляд, а должность — располагаться под ним более спокойной строкой.

Размер и начертание делают строку более значимой. Более мягкий цвет отодвигает её на второй план. Небольшое расстояние между аватаром и именем позволяет каждому из них «дышать».

challenge icon

Задание

Легко

Оформите карточку:

  • добавьте 16 пикселей отступа между аватаром и именем
  • задайте размер имени 28 и сделайте его полужирным
  • задайте для должности цвет Colors.blueGrey

Попробуйте сами

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.indigo,
                child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
              ),
              Text('Jordan Diaz'),
              Text('Flutter Developer'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Ваше первое приложение

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter