Sunday, May 12, 2019

Mengatasi Masalah "Overflowing Rendering" Pada Layar Input Form Flutter

Error overflowing RenderFlex
Mengatasi Masalah "Overflowing Rendering" atau Keluar Strip Kuning Hitam pada Flutter - Muncul tampilan strip kuning hitam pada tampilan Flutter adalah hal yang cukup menyebalkan. Muncul nya tampilan strip kuning hitam pada layar aplikasi yang kita buat dengan Flutter menandakan suatu error yaitu Overflow Rendering, atau dengan kata lain ruang layar tidak cukup untuk menampilkan widget-widget kita secara keseluruhan, sehingga oleh engine Flutter akan ditampilkan tampilan strip kuning hitam baik secara horizontal maupun vertikal.

Hal ini tentu saja tidak boleh terjadi pada pembuatan aplikasi sesungguhnya, karena merupakan bug yang membuat UI/UX menjadi negatif. Untuk itu kita harus mengantisipasi agar masalah ini tidak terjadi pada aplikasi Flutter kita.

Keluar tampilan strip kuning hitam ini nampaknya membuat frustasi bagi pemula yang baru belajar Flutter, terutama keluar tampilan strip kuning hitam saat keyboard muncul ketika user ingin mengetikan huruf pada input form. Tentunya sobat akan segera mencari solusi jika menemui masalah yang ckup menganggu ini, jika tidak tepat sasaran maka solusi yang sobat ambil akan menambah masalah lain. Misalnya sobat akan merubah layout tampilan layar Flutter, dsb.

Jika sobat mengalami masalah Overflow Rendering pada aplikasi mobile yang sobat buat dengan Flutter, solusinya sangat sederhana yaitu dengan  mebungkus widget utama menggunakan widget SingleChildScrollView.

Berikut saya contohkan, contoh kode Flutter pada kasus form login yang tanpa SingleChildScrollView  dan dengan SingleChildScrollView, untuk kita lihat bedanya nanti.

Contoh Kode Form Login 1 (tanpa SingleChildScrollView)
import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          children: [
            SizedBox(
              height: 200,
            ),
            Form(
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "Email",
                        hintStyle: TextStyle(color: Colors.grey),
                        enabledBorder: const UnderlineInputBorder(
                          borderSide: const BorderSide(color: Colors.blue, width: 2.0),
                        )
                    ),
                    keyboardType: TextInputType.emailAddress,
                    style: TextStyle(fontSize: 20),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "Password",
                        hintStyle: TextStyle(color: Colors.grey),
                        enabledBorder: const UnderlineInputBorder(
                          borderSide: const BorderSide(color: Colors.blue, width: 2.0),
                        )
                    ),
                    keyboardType: TextInputType.text,
                    obscureText: true,
                    style: TextStyle(fontSize: 20),
                  ),

                ],
              ),
            ),
            SizedBox(
              height: 30,
            ),
            InkWell(
              onTap: (){
                print("Login process");
              },
              child: Container(
                //width: 100.0,                height: 40,
                decoration: new BoxDecoration(
                  color: Colors.deepOrange,
                  border: Border.all(color: Colors.deepOrange, width: 2.0),
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Center(child: Text('Login', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
              ),
            )
          ],
        ),
      )
    );
  }
}
Hasil dari kode diatas adalah sebagai berikut (sebelum dan setelah keyboard muncul)
Form Login 1 (Error Overflow)
Lalu coba kita perbaiki kode di atas dengan membungkus SingleChildScrollView pada widget utamanya dengan scroll direction vertical. Berikut adalah contoh kode perbaikan nya:
import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child:Padding(
          padding: EdgeInsets.symmetric(horizontal: 30),
          child: Column(
            children: [
              SizedBox(
                height: 200,
              ),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                          hintText: "Email",
                          hintStyle: TextStyle(color: Colors.grey),
                          enabledBorder: const UnderlineInputBorder(
                            borderSide: const BorderSide(color: Colors.blue, width: 2.0),
                          )
                      ),
                      keyboardType: TextInputType.emailAddress,
                      style: TextStyle(fontSize: 20),
                    ),
                    SizedBox(
                      height: 15,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          hintText: "Password",
                          hintStyle: TextStyle(color: Colors.grey),
                          enabledBorder: const UnderlineInputBorder(
                            borderSide: const BorderSide(color: Colors.blue, width: 2.0),
                          )
                      ),
                      keyboardType: TextInputType.text,
                      obscureText: true,
                      style: TextStyle(fontSize: 20),
                    ),

                  ],
                ),
              ),
              SizedBox(
                height: 30,
              ),
              InkWell(
                onTap: (){
                  print("Login process");
                },
                child: Container(
                  //width: 100.0,                  height: 40,
                  decoration: new BoxDecoration(
                    color: Colors.deepOrange,
                    border: Border.all(color: Colors.deepOrange, width: 2.0),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Center(child: Text('Login', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
                ),
              )
            ],
          ),
        )
      )
    );
  }
}

Hasil dari kode di atas adalah sebagai berikut (sebelum dan setelah keyboard muncul)
Form Login 2 (Error Overflow Tidak Terjadi)

Cukup simpel kan, mengatasi masalah Overflow Rendering dengan cara di atas? Overflow Rndering juga bisa terjadi pada sudut horizontal, untuk mengatasi masalah tersebut caranya dengan hanya saja properti scroll direction yang digunakan aadalah Axis.horizontal bukan Axis.vertical seperti kasus di atas.

Source Code Lengkap : GITHUB
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: