Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 39 : Memahami Flutter Focus

Tutorial Dart 39 : Memahami Flutter Focus

-

Last Updated on February 4, 2023 by

Pengembangan aplikasi Flutter berkembang pesat karena spesifikasinya yang unik. Tentunya sebagai developer harus memahami sistem flutter focus dengan baik. Bergantung pada kebutuhan, ini termasuk bagian dari keyword focus system dalam pengembangan aplikasi.

Sistem Flutter Focus mudah dipahami dan dipelihara sebagai bagian dari aplikasi. Ini terutama difokuskan pada menekan keyword shortcut tertentu juga.

Pada Artikel kali ini kita akan belajar Flutter dan cara mengontrol ke mana input keyboard diarahkan. Jika Anda mengimplementasikan aplikasi yang menggunakan keyboard fisik, seperti sebagian besar aplikasi desktop dan web, halaman ini cocok untuk Anda.

Flutter Focus System

flutter focus, belajar flutter

Belajar Flutter hadir dengan sistem fokus yang mengarahkan input keyboard ke bagian tertentu dari aplikasi. Untuk melakukannya, pengguna “memfokuskan” input ke bagian aplikasi tersebut dengan mengetuk atau mengklik elemen UI yang diinginkan.

Setelah itu terjadi, teks yang dimasukkan dengan keyboard mengalir ke bagian aplikasi tersebut hingga fokus berpindah ke bagian lain dari aplikasi tersebut. Fokus juga dapat dipindahkan dengan menekan pintasan keyboard tertentu, yang biasanya terikat ke tombol Tab , sehingga terkadang disebut “penjelajahan tab”.

Elemen Flutter Focus System

Di bawah ini adalah istilah, seperti yang digunakan untuk elemen Flutter Focus. Berbagai kelas yang menerapkan beberapa konsep ini diperkenalkan di bawah ini.

  • Focus tree – Pohon simpul fokus yang biasanya sedikit mencerminkan pohon widget, mewakili semua widget yang dapat menerima fokus.
  • Focus node – Node tunggal dalam pohon fokus. Node ini dapat menerima fokus, dan dikatakan “memiliki fokus” jika menjadi bagian dari rantai fokus. Itu berpartisipasi dalam menangani peristiwa-key event hanya ketika memiliki fokus.
  • Primary focus – Node fokus terjauh dari akar pohon fokus yang memiliki fokus. Ini adalah simpul fokus tempat key event mulai menyebar ke simpul fokus utama dan leluhurnya.
  • Focus chain – Daftar urutan simpul fokus yang dimulai dari simpul fokus utama dan mengikuti cabang pohon fokus ke akar pohon fokus.
  • Focus scope – Node fokus khusus yang tugasnya memuat sekelompok node fokus lainnya, dan hanya mengizinkan node tersebut untuk menerima fokus. Ini berisi informasi tentang node mana yang sebelumnya difokuskan pada subtree-nya.
  • Focus traversal – Proses perpindahan dari satu node yang dapat difokuskan ke node lain dalam urutan yang dapat diprediksi. Ini biasanya terlihat di aplikasi saat pengguna menekan tombol Tab untuk berpindah ke kontrol atau bidang yang dapat difokuskan berikutnya.

FocusNode dan FocusScopeNode

Objek FocusNode menerapkan FocusScopeNode mekanisme flutter focus. Mereka adalah objek berumur panjang (lebih panjang dari widget, mirip dengan objek render) yang menyimpan status dan atribut fokus sehingga tetap ada di antara build pohon widget. Bersama-sama, mereka membentuk struktur data pohon fokus.

Artikel Terkait  Tutorial Dart 25 : Definisi Flutter Row and Column dan Penerapannya

Mereka awalnya dimaksudkan untuk menjadi objek yang dihadapi developer yang digunakan untuk mengontrol beberapa aspek Fluter Focus system, tetapi seiring waktu mereka telah berevolusi untuk sebagian besar mengimplementasikan detail sistem fokus.

Untuk mencegah kerusakan aplikasi yang ada, mereka masih mengandung antarmuka publik untuk atributnya. Namun, secara umum, hal yang paling berguna adalah bertindak sebagai pegangan yang relatif buram, diteruskan ke widget turunan untuk memanggil requestFocus() widget ancestor, yang meminta agar widget turunan mendapatkan fokus. Pengaturan atribut lainnya paling baik dikelola oleh Focus atau FocusScopewidget, kecuali jika Anda tidak menggunakannya, atau menerapkan versi Anda sendiri.

Unfocus

Ada API untuk memberi tahu sebuah node untuk “give up focus”, bernama FocusNode.unfocus(). Meskipun menghilangkan fokus dari node, penting untuk disadari bahwa sebenarnya tidak ada yang namanya “unfocusing” di semua node. Jika sebuah node unfocus, maka harus melewati fokus di tempat lain, karena selalu ada fokus utama. Simpul yang menerima Flutter focus ketika sebuah simpul memanggil unfocus()adalah simpul terdekat FocusScopeNode, atau simpul yang sebelumnya terfokus dalam lingkup itu, bergantung pada disposition argumen yang diberikan kepada unfocus(). Jika Anda ingin lebih banyak kontrol ke mana fokus pergi ketika Anda menghapusnya dari sebuah node, fokuskan node lain secara eksplisit alih-alih memanggil unfocus(), atau gunakan mekanisme traversal fokus untuk menemukan node lain dengan metode focusInDirectionnextFocus, atau previousFocus pada FocusNode.

Saat memanggil unfocus(), disposition argumen memungkinkan dua mode untuk unfocus: UnfocusDisposition.scope dan UnfocusDisposition.previouslyFocusedChild.

Standarnya adalah scope, yang memberikan fokus ke cakupan fokus induk terdekat. Ini berarti bahwa jika fokus kemudian dipindahkan ke node berikutnya dengan FocusNode.nextFocus, maka dimulai dengan item yang dapat difokuskan “pertama” dalam cakupan.

Disposisi previouslyFocusedChild akan mencari ruang lingkup untuk menemukan anak yang sebelumnya difokuskan dan meminta fokus padanya. Jika tidak ada anak yang difokuskan sebelumnya, itu setara dengan scope.

Focus Widget

flutter focus, belajar flutter

Dalam belajar flutter yang paling sederhana, membungkus Focus widget di sekitar subtree widget memungkinkan subtree widget untuk mendapatkan fokus sebagai bagian dari proses traversal fokus, atau kapanpun request Focus dipanggil saat FocusNode diteruskan ke sana. Saat digabungkan dengan pendeteksi isyarat yang memanggil requestFocus, ia dapat menerima fokus saat diketuk atau diklik.

Anda mungkin meneruskan FocusNode objek ke Focuswidget untuk dikelola, tetapi jika tidak, widget akan membuatnya sendiri. Alasan utama untuk membuatnya sendiri FocusNode adalah agar dapat memanggil requestFocus() node untuk mengontrol fokus dari widget induk. Sebagian besar fungsi lain dari a FocusNode paling baik diakses dengan mengubah atribut Focuswidget itu sendiri.

Widget digunakan di Focus sebagian besar kontrol Flutter sendiri untuk mengimplementasikan fungsi fokusnya.

Berikut adalah contoh yang menunjukkan cara menggunakan Focuswidget untuk membuat kontrol khusus dapat difokuskan. Itu membuat wadah dengan teks yang bereaksi untuk menerima fokus.

import 'package:flutter/material.dart';

 

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

 

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  static const String _title = 'Focus Sample';

 

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: _title,

      home: Scaffold(

        appBar: AppBar(title: const Text(_title)),

        body: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: const <Widget>[MyCustomWidget(), MyCustomWidget()],

        ),

      ),

    );

  }

}

 

class MyCustomWidget extends StatefulWidget {

  const MyCustomWidget({super.key});

 

  @override

  State<MyCustomWidget> createState() => _MyCustomWidgetState();

}

 

class _MyCustomWidgetState extends State<MyCustomWidget> {

  Color _color = Colors.white;

  String _label = 'Unfocused';

 

  @override

  Widget build(BuildContext context) {

    return Focus(

      onFocusChange: (focused) {

        setState(() {

          _color = focused ? Colors.black26 : Colors.white;

          _label = focused ? 'Focused' : 'Unfocused';

        });

      },

      child: Center(

        child: Container(

          width: 300,

          height: 50,

          alignment: Alignment.center,

          color: _color,

          child: Text(_label),

        ),

      ),

    );

  }

}

Key Event Flutter Focus

Key event dimulai pada simpul fokus dengan fokus utama. Jika simpul itu tidak kembali KeyEventResult.handled dari onKeyHandler, maka simpul fokus induknya diberikan peristiwa tersebut. Jika induknya tidak menanganinya, ia pergi ke induknya, dan seterusnya, hingga mencapai akar pohon fokus. Jika peristiwa mencapai akar pohon fokus tanpa ditangani, peristiwa tersebut dikembalikan ke platform untuk diberikan ke kontrol native berikutnya dalam aplikasi (jika Flutter UI adalah bagian dari UI aplikasi native yang lebih besar). Acara yang ditangani tidak disebarkan ke widget Flutter lain, dan juga tidak disebarkan ke widget asli.

Artikel Terkait  Tutorial Dart 4 : Mengenal Tipe data pada Dart

Berikut adalah contoh Focuswidget yang menyerap setiap kunci yang tidak ditangani oleh subpohonnya, tanpa dapat menjadi fokus utama:

@override

Widget build(BuildContext context) {

  return Focus(

    onKey: (node, event) => KeyEventResult.handled,

    canRequestFocus: false,

    child: child,

  );

}

Key Event Flutter focus diproses sebelum peristiwa entri teks, sehingga penanganan peristiwa kunci saat widget fokus mengelilingi bidang teks akan mencegah tombol tersebut dimasukkan ke dalam bidang teks.

Berikut adalah contoh widget yang tidak mengizinkan huruf “a” diketik ke dalam bidang teks:

@override

Widget build(BuildContext context) {

  return Focus(

    onKey: (node, event) {

      return (event.logicalKey == LogicalKeyboardKey.keyA)

          ? KeyEventResult.handled

          : KeyEventResult.ignored;

    },

    child: TextField(),

  );

}

Jika maksudnya adalah validasi input, fungsionalitas contoh ini mungkin akan lebih baik diimplementasikan menggunakan a TextInputFormatter, tetapi tekniknya masih bisa berguna: Shortcutswidget menggunakan metode ini untuk menangani pintasan sebelum menjadi input teks, misalnya.

Mendapatkan FocusNode

Untuk mengakses simpul fokus dari ancestor Focuswidget, buat dan teruskan FocusNode sebagai atribut Focuswidget. Karena perlu dibuang, node fokus yang Anda lewati harus dimiliki oleh widget stateful, jadi jangan hanya membuatnya setiap kali dibangun.

Jika Anda memerlukan akses ke node fokus dari turunan Focuswidget, Anda dapat memanggil Focus.of(context) untuk mendapatkan node fokus Focus widget terdekat dengan konteks yang diberikan. Jika Anda perlu mendapatkan FocusNodewidget Focus dalam fungsi build yang sama, gunakan Builder untuk memastikan Anda memiliki konteks yang benar. Ini ditunjukkan dalam contoh berikut:

@override

Widget build(BuildContext context) {

  return Focus(

    child: Builder(

      builder: (context) {

        final bool hasPrimary = Focus.of(context).hasPrimaryFocus;

        print('Building with primary focus: $hasPrimary');

        return const SizedBox(width: 100, height: 100);

      },

    ),

  );

}

Widget FocusScope

flutter focus, belajar flutter

Widget FocusScope adalah versi khusus dari Focuswidget yang mengatur FocusScopeNode bukan FocusNode. FocusScopeNode adalah simpul khusus di Focus Tree yang berfungsi sebagai mekanisme pengelompokan untuk simpul fokus di subtree. Traversal fokus tetap berada dalam lingkup fokus kecuali sebuah node di luar lingkup difokuskan secara eksplisit.

Lingkup fokus juga melacak fokus saat ini dan riwayat node yang difokuskan di dalam subtreenya. Dengan begitu, jika sebuah node melepaskan fokus atau dihilangkan saat memiliki fokus, fokus tersebut dapat dikembalikan ke node yang memiliki fokus sebelumnya.

Cakupan fokus juga berfungsi sebagai tempat untuk mengembalikan fokus jika tidak ada turunan yang memiliki fokus. Hal ini memungkinkan kode traversal fokus memiliki konteks awal untuk menemukan kontrol berikutnya (atau pertama) yang dapat difokuskan untuk dipindahkan.

Artikel Terkait  Tutorial Dart 47: Penggunaan Flutter Read Write File

Jika Anda memfokuskan node lingkup fokus, pertama-tama ia akan mencoba memfokuskan node saat ini, atau node yang baru saja difokuskan di sub pohonnya, atau node di subtreenya yang meminta fokus otomatis (jika ada). Jika tidak ada simpul seperti itu, ia menerima fokus itu sendiri.

Mengontrol traversal fokus

Setelah aplikasi memiliki kemampuan untuk fokus, hal berikutnya yang ingin dilakukan oleh banyak aplikasi adalah mengizinkan pengguna untuk mengontrol fokus menggunakan keyboard atau perangkat input lainnya. Contoh paling umum dari ini adalah “tab traversal” di mana pengguna menekan tombol Tab untuk pergi ke kontrol “berikutnya”.

Mengontrol “selanjutnya” adalah subjek dari bagian ini. Traversal semacam ini disediakan oleh Flutter secara default.

Dalam tata letak kisi sederhana, cukup mudah untuk memutuskan kontrol mana yang berikutnya. Jika Anda tidak berada di akhir baris, maka baris tersebut berada di kanan (atau kiri untuk lokal kanan-ke-kiri). Jika Anda berada di akhir baris, ini adalah kontrol pertama di baris berikutnya. Sayangnya, aplikasi jarang ditata dalam kisi-kisi, sehingga diperlukan lebih banyak panduan.

Algoritma default di Flutter focus (ReadingOrderTraversalPolicy) untuk traversal fokus cukup bagus: Ini memberikan jawaban yang tepat untuk sebagian besar aplikasi. Namun, selalu ada kasus patologis, atau kasus di mana konteks atau desain memerlukan urutan yang berbeda dari urutan algoritma pengurutan default. Untuk kasus tersebut, ada mekanisme lain untuk mencapai urutan yang diinginkan.

Widget FocusTraversalGroup

Widget harus ditempatkan di FocusTraversalGroup hierarki di sekitar subtree widget yang harus dilintasi sepenuhnya sebelum beralih ke widget atau grup widget lain. Hanya mengelompokkan widget ke dalam grup terkait seringkali cukup untuk menyelesaikan banyak masalah pemesanan traversal tab. Jika tidak, grup juga dapat diberikan FocusTraversalPolicy untuk menentukan urutan dalam grup.

Standarnya ReadingOrderTraversalPolicy biasanya cukup, tetapi dalam kasus di mana diperlukan lebih banyak kontrol atas pemesanan, OrderedTraversalPolicy dapat digunakan. Argumen widget order flutter focus yang ada di FocusTraversalOrder melilit komponen yang dapat difokuskan menentukan urutannya. Urutan dapat berupa subkelas apa pun dari FocusOrder, tetapi NumericFocusOrder dan LexicalFocusOrder disediakan.

Jika tidak ada kebijakan traversal fokus yang disediakan cukup untuk aplikasi Anda, Anda juga dapat menulis kebijakan Anda sendiri dan menggunakannya untuk menentukan pemesanan kustom yang Anda inginkan.

Berikut adalah contoh cara menggunakan FocusTraversalOrderwidget untuk melintasi deretan tombol dalam urutan SATU,  DUA, TIGA menggunakan NumericFocusOrder.

class OrderedButtonRow extends StatelessWidget {

  const OrderedButtonRow({super.key});

 

  @override

  Widget build(BuildContext context) {

    return FocusTraversalGroup(

      policy: OrderedTraversalPolicy(),

      child: Row(

        children: <Widget>[

          const Spacer(),

          FocusTraversalOrder(

            order: NumericFocusOrder(2.0),

            child: TextButton(

              child: const Text('ONE'),

              onPressed: () {},

            ),

          ),

          const Spacer(),

          FocusTraversalOrder(

            order: NumericFocusOrder(1.0),

            child: TextButton(

              child: const Text('TWO'),

              onPressed: () {},

            ),

          ),

          const Spacer(),

          FocusTraversalOrder(

            order: NumericFocusOrder(3.0),

            child: TextButton(

              child: const Text('THREE'),

              onPressed: () {},

            ),

          ),

          const Spacer(),

        ],

      ),

    );

  }

}

Temukan lebih banyak artikel seri belajar Dart maupun bahasa pemrograman lainnya hanya di CODEKEY. Klik https://codekey.id/ sekarang juga untuk langsung belajar gratis. Sampai bertemu lagi!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya