Wizytówka: Układ

Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 30 z 32.

Czas połączyć to wszystko w całość. W trzech kolejnych lekcjach zbudujesz aplikację z wizytówką — taki ekran, od którego zaczyna się każda strona profilu.

Zacznij od układu. Najpierw naszkicuj ekran w postaci prostokątów: u góry okrągły awatar, potem imię i nazwisko, a następnie stanowisko — wszystko w jednej kolumnie na środku ekranu. Gdy prostokąty znajdą się we właściwych miejscach, pora zająć się stylami.

Wyzwanie

Łatwy

Zbuduj kartę na środku ekranu jako Column (z mainAxisSize: MainAxisSize.min) zawierającą:

CircleAvatar z radius: 48, backgroundColor: Colors.indigo i inicjałami JD jako elementem podrzędnym, w kolorze białym, o rozmiarze 32
imię i nazwisko: Jordan Diaz
stanowisko: Flutter Developer

Spróbuj swoich sił

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: Text('Jordan Diaz'),
        ),
      ),
    );
  }
}