Saturday, July 10, 2021

MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER

      , ,    Comment  

Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2021/07/membuat-halaman-tampil-detail-flutter.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca

kali ini abang akan memberikan scrip halaman master detail di bahasa pemrograman flutter, langsung saja, berikut ini tampilannya

ini script nya:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const Neraca(),
    );
  }
}

class Neraca extends StatelessWidget {
  final String datanya = 'DATA INI DARI VARIABLE';

  const Neraca({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Halaman Detail"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(datanya.toString()),
              const Text(
                  'Halaman informasi data static tanpa State, data variable\nTekan tombol dibawah untuk informasi detail data'),
              IconButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DetailPage(
                                kirimData: datanya,
                              )),
                    );
                  },
                  icon: const Icon(Icons.arrow_circle_up))
            ],
          ),
        ));
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({Key? key, required this.kirimData}) : super(key: key);

  final String kirimData;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Halaman Detail"),
        ),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              Text('data yang dikirim adalah : \n' + kirimData),
              ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('Go back!'),
              ),
            ])));
  }
}

Sebelum melanjutkan membaca artikel ini, berikut adalah artikel yang berkaitan dengan judul artikel MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER :
 ok, silahkan lanjut membaca.

Terimakasih atas kunjungan Anda dan Karena telah sudi membaca artikel yang berjudul MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER.Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Anda boleh menyebarluaskan atau mengcopy artikel MEMBUAT HALAMAN TAMPIL DETAIL | FLUTTER ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Happy Blogging :)


EmoticonEmoticon