Cara Menggunakan If dan Else di child widget di Flutter

Selama membangun sebuah aplikasi mobile di android atau ios dengan Flutter, terkadang kita perlu menampilkan konten sesuai kondisi menggunakan percabangan pernyataan if..else sesuai dengan kebutuhan kita. Di Flutter, kita tidak dapat menempatkan pernyataan percabangan if…else secara langsung pada atribut child, Namun Anda dapat menerapkan ketentuan atribut child, kita tidak dapat langsung menuliskan pernyataan if..else langsung di child seperti bawah ini.

            Container(
              child: 
              if (nilai >= 10) {
                return Text("Y is greater than or equal to 10");
              } else {
                return Text("Y is less than 10");
              }
            ),

jika codenya seperti diatas akan error “Expected an identifier.dart(missing_identifier)” dan “Expected to find ‘)’.dart(expected_token)”.

Anda dapat menuliskan if…else dengan dengan beberapa methode :

1. Menggunakan Ternary Operator (? 🙂

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

var nilai = 30;
var nilai2 = 80;

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

// ignore: must_be_immutable
class MyApp extends StatelessWidget {
  MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text(
            "How to use Conditional Statement (IF ELSE) on Child Widget in Flutter"),
      ),
      body: Container(
        height: 1250,
        child: ListView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(top: 20),
                child: Center(
                    child: nilai >= 10
                        ? Text("Nilai is greater than or equal to 10")
                        : Text("Nilai is less than 10"))),
          ],
        ),
      ),
    ));
  }
}

Kita akan membahas sedikit tetang kode diatas :

pertama kita deklarasikan variable nilai seperti dibawah ini

var nilai = 30;
var nilai2 = 80;

lalu di child widget kita akan melakukan pengkondisian dimana jika variable nilai lebih besar atau sama dengan 10 maka akan ditampilkan text “Nilai is greater than or equal to 10” jika tidak akan tampil text “Nilai is less than 10”, kode pengkondisiannya seperti dibawah ini

child: nilai >= 10
? Text(“Nilai is greater than or equal to 10”)
: Text(“Nilai is less than 10”))),

Jika kode di atas di running akan tampak seperti gambar dibawah ini

2. Menggunakan LayoutBuilder

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

var nilai = 30;
var nilai2 = 80;

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

// ignore: must_be_immutable
class MyApp extends StatelessWidget {
  MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text(
            "How to use Conditional Statement (IF ELSE) on Child Widget in Flutter"),
      ),
      body: Container(
        height: 1250,
        child: ListView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            Container(
                margin: EdgeInsets.only(top: 20),
                child: Center(
                    child: LayoutBuilder(builder: (context, constraints) {
                  if (nilai >= 10) {
                    return Text("Nilai is greater than or equal to 10");
                  } else {
                    return Text("Nilai is less than 10");
                  }
                }))),
          ],
        ),
      ),
    ));
  }
}

Diatas adalah contoh penggunaan LayoutBuilder dalam pengkondisian if..else, kita fokus pada kode

child: LayoutBuilder(builder: (context, constraints) {
if (nilai >= 10) {
return Text(“Nilai is greater than or equal to 10”);
} else {
return Text(“Nilai is less than 10”);
}
}

Pertama kita buat LayoutBuilder-nya =>child: LayoutBuilder(builder: (context, constraints) lalu buat pengkondidian if..else nya :

if (nilai >= 10) {
return Text(“Nilai is greater than or equal to 10”);
} else {
return Text(“Nilai is less than 10”);
}

jika di jalankan kode diatas maka akan tampak seperti ini

3. Menggunakan Method/Function

import 'package:flutter/material.dart';

var nilai = 30;
var nilai2 = 80;

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

// ignore: must_be_immutable
class MyApp extends StatelessWidget {
  MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text(
                  "How to use Conditional Statement (IF ELSE) on Child Widget in Flutter"),
            ),
            body: Container(
                margin: EdgeInsets.only(top: 20),
                child: Center(
                    child: LayoutBuilder(
                        builder: (context, constraints) => showwidget())))));
  }

  showwidget() {
    if (nilai >= 10) {
      return Text("Nilai is greater than or equal to 10");
    } else {
      return Text("Nilai is less than 10");
    }
  }
}

Diatas kita menggunakan method atau fungtion showwidget() untuk menampilakan hasil pengkondisian if..else

showwidget() {
if (nilai >= 10) {
return Text(“Nilai is greater than or equal to 10”);
} else {
return Text(“Nilai is less than 10”);
}
}

kemudian kita panggil method diatas didalam body agar menampilkan hasil pengkondisiannya

Demikain tutorial Cara Menggunakan If dan Else di child widget di Flutter, semoga bermanfaat.