Menu
CoddyTech

Twój pierwszy przycisk

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 1 z 34.

Do tej pory Twoje aplikacje tylko coś wyświetlały. W tej sekcji sprawisz, że zaczną reagować, zaczynając od przycisku.

ElevatedButton(
  onPressed: () {},
  child: Text('Start'),
)

child: określa, co wyświetla przycisk, zwykle jest to Text. onPressed: określa, co się dzieje, gdy ktoś dotknie przycisku.

() {} to funkcja bez nazwy: mały fragment kodu, który przycisk przechowuje i uruchamia po każdym dotknięciu. Kod umieszcza się między nawiasami klamrowymi. Ta funkcja jest pusta, więc dotknięcie na razie nic nie robi, ale przycisk jest gotowy do naciśnięcia.

Po ustawieniu onPressed: null przycisk jest wyszarzony i nie można go nacisnąć. null oznacza „brak wartości”: brak kodu do uruchomienia.

challenge icon

Wyzwanie

Łatwy

Aplikacja wyświetla słowo Start. Zmień je w przycisk ElevatedButton, który można nacisnąć, i ustaw Start jako jego element podrzędny. Wystarczy pusta funkcja dla onPressed.

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('Start'),
        ),
      ),
    );
  }
}
quiz iconSprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Dodajemy interaktywność

Poćwicz samodzielnie: Kompilator Flutter online