Posts

Bismillah, stepper adalah widget yang berfungsi untuk menampilkan langkah-langkah dengan tampilan seperti berikut :

Sekarang kita akan membuat sebuah step tentang Cara Membuat Teh, buat sebuah project baru :

lalu kita edit pada main.dartnya menjadi seperti berikut :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentStep = 0;
  bool complete = false;
  List<Step> mySteps = [
    Step(
        isActive: true,
        title: Text("Step 1"),
        content: Text("Beli Teh dan gula di warung")
    ),
    Step(
        isActive: false,
        title: Text("Step 2"),
        content: Text("Siapkan gelas dan air panas")
    ),
    Step(
        isActive: false,
        title: Text("Step 3"),
        content: Text("Masukan teh kedalam gelas dan berikan gula secukupnya")
    ),
    Step(
        isActive: false,
        title: Text("Step 4"),
        content: Text("Tuangkan air panas")
    ),
    Step(
        isActive: false,
        title: Text("Step 5"),
        content: Text("Tunggu hingga warna air menjadi gelap")
    ),
    Step(
        isActive: false,
        title: Text("Step 6"),
        content: Text("Teh siap diminum")
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Langkah Membuat Teh"),
      ),

      body: Stepper(
        steps: mySteps,
        currentStep: currentStep,
        onStepContinue: next,
        onStepTapped: (step) => goTo(step),
        onStepCancel: cancel,
      )
    );
  }

  next() {
    currentStep + 1 != mySteps.length
        ? goTo(currentStep + 1)
        : setState(() => complete = true);
  }

  cancel() {
    if (currentStep > 0) {
      goTo(currentStep - 1);
    }
  }

  goTo(int step) {
    setState(() => currentStep = step);
  }
}

dan hasilnya :