[Flutter][15] SingleChildScrollView - Mengatur Konten Yang Melebihi Tinggi Layar

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Monday, 04 Mar 2019

Hello world,

Kalau kita menemukan kondisi dimana kita harus membuat halaman yang isinya hanya text atau konten lain yang bukan merupakan List atau Grid maka akan ada sedikit masalah jika ternyata konten kita melebihi tinggi layar hp pengguna. Di sini perlu saya perjelas lagi kalau List dan Grid akan otomatis bisa discroll. Biasanya ini terjadi pada halaman detail artikel atau halaman lain yang isinya banyak text. Saya buat contoh di bawah ini. 

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis lorem, molestie quis nibh vel, varius rhoncus felis. Donec eget imperdiet turpis. Fusce sed tortor dictum, vehicula lorem quis, facilisis quam. Vestibulum massa nunc, fringilla sed tempor imperdiet, varius ac leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et elit feugiat, maximus nisi et, imperdiet odio. Suspendisse potenti. Pellentesque ante justo, semper eu blandit a, laoreet a nisl. Nam eget sem accumsan, convallis tortor faucibus, vulputate urna. Integer consequat ante vitae pharetra dignissim. Proin in tortor lacinia, malesuada nulla egestas, dignissim orci. Donec eget dui sed lorem porttitor mattis ut vitae felis. Fusce molestie vel dolor eu fringilla. Curabitur id risus felis. Donec fringilla mi ac nisl porttitor, vel gravida sapien vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus bibendum massa, sit amet interdum dolor semper non. Vivamus sed vestibulum urna. Maecenas lorem est, tristique a ex eu, rutrum ultricies nisl. Integer id lectus id nisl ornare iaculis. Praesent ornare ante a neque congue, sit amet suscipit metus rutrum. Praesent placerat elit nec metus blandit tempor. Fusce vitae lectus viverra, venenatis sapien sed, varius metus. Curabitur eu leo at lectus accumsan varius ac vel mauris. Sed tempor urna ac odio pharetra volutpat. Fusce sollicitudin vulputate mauris quis gravida. Praesent hendrerit neque nisl, id posuere libero egestas porttitor. Phasellus scelerisque tortor vulputate libero molestie, id pellentesque lorem sagittis. Morbi suscipit, erat quis molestie rhoncus, ante sem rhoncus urna, ac mollis sapien elit vitae felis. Sed in nibh malesuada, efficitur risus ac, accumsan arcu. Donec nisl odio, vulputate sit amet orci vel, faucibus eleifend ex. Morbi maximus lectus at neque pellentesque aliquam. Vivamus mi risus, condimentum vitae blandit at, dignissim at risus. Maecenas ullamcorper ipsum ut convallis auctor. Mauris fermentum erat vel tortor luctus, ut hendrerit nisl elementum. Nulla nec massa eleifend, fringilla tellus quis, rhoncus sapien. Phasellus non neque laoreet, tincidunt est eu, venenatis sapien. Quisque gravida bibendum ante, eget sodales metus aliquam ultrices. Fusce malesuada purus ut dui rhoncus, sit amet semper augue sollicitudin. Nulla facilisi. Nunc in quam et nisl pellentesque feugiat. Cras dignissim dolor magna, a ultricies lorem hendrerit sed. Fusce vitae augue a enim imperdiet euismod quis in sem. Ut blandit tempus efficitur. Duis sollicitudin dictum vulputate. Donec diam elit, porttitor eget nunc a, faucibus maximus mauris. Nulla dolor ligula, aliquam sed iaculis et, condimentum egestas tellus. Proin condimentum placerat purus in gravida. Fusce condimentum ut metus eget lacinia. Curabitur cursus cursus tellus ut varius. Nulla id condimentum turpis. Etiam sed risus interdum, gravida sapien non, tristique urna. Aenean tincidunt diam sem, ac posuere erat efficitur eget. Etiam rhoncus urna eget nisl posuere, eu facilisis libero pellentesque. Ut volutpat turpis id sem dapibus vestibulum. Nam efficitur aliquet urna quis volutpat. Sed id tempus diam. Sed vitae aliquam tellus. Aenean cursus velit sit amet finibus efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum ligula, ullamcorper id sollicitudin eu, pretium vel ipsum."),
)
);
}
}

Di contoh ini saya buat sebuah Container yang isinya hanya Text. Tapi karena textnya sangat panjang akhirnya sampai melebihi tinggi layar. Dan ini tidak akan bisa discroll ke bawah karena Container tidak memiliki fungsi itu. Agar bisa discroll maka kita bisa tambahan widget yang bernama SingleChildScrollView. Kita bisa menggunakannya dengan cara seperti ini.

body: new Container(
child: SingleChildScrollView(
child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis lorem, molestie quis nibh vel, varius rhoncus felis. Donec eget imperdiet turpis. Fusce sed tortor dictum, vehicula lorem quis, facilisis quam. Vestibulum massa nunc, fringilla sed tempor imperdiet, varius ac leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et elit feugiat, maximus nisi et, imperdiet odio. Suspendisse potenti. Pellentesque ante justo, semper eu blandit a, laoreet a nisl. Nam eget sem accumsan, convallis tortor faucibus, vulputate urna. Integer consequat ante vitae pharetra dignissim. Proin in tortor lacinia, malesuada nulla egestas, dignissim orci. Donec eget dui sed lorem porttitor mattis ut vitae felis. Fusce molestie vel dolor eu fringilla. Curabitur id risus felis. Donec fringilla mi ac nisl porttitor, vel gravida sapien vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus bibendum massa, sit amet interdum dolor semper non. Vivamus sed vestibulum urna. Maecenas lorem est, tristique a ex eu, rutrum ultricies nisl. Integer id lectus id nisl ornare iaculis. Praesent ornare ante a neque congue, sit amet suscipit metus rutrum. Praesent placerat elit nec metus blandit tempor. Fusce vitae lectus viverra, venenatis sapien sed, varius metus. Curabitur eu leo at lectus accumsan varius ac vel mauris. Sed tempor urna ac odio pharetra volutpat. Fusce sollicitudin vulputate mauris quis gravida. Praesent hendrerit neque nisl, id posuere libero egestas porttitor. Phasellus scelerisque tortor vulputate libero molestie, id pellentesque lorem sagittis. Morbi suscipit, erat quis molestie rhoncus, ante sem rhoncus urna, ac mollis sapien elit vitae felis. Sed in nibh malesuada, efficitur risus ac, accumsan arcu. Donec nisl odio, vulputate sit amet orci vel, faucibus eleifend ex. Morbi maximus lectus at neque pellentesque aliquam. Vivamus mi risus, condimentum vitae blandit at, dignissim at risus. Maecenas ullamcorper ipsum ut convallis auctor. Mauris fermentum erat vel tortor luctus, ut hendrerit nisl elementum. Nulla nec massa eleifend, fringilla tellus quis, rhoncus sapien. Phasellus non neque laoreet, tincidunt est eu, venenatis sapien. Quisque gravida bibendum ante, eget sodales metus aliquam ultrices. Fusce malesuada purus ut dui rhoncus, sit amet semper augue sollicitudin. Nulla facilisi. Nunc in quam et nisl pellentesque feugiat. Cras dignissim dolor magna, a ultricies lorem hendrerit sed. Fusce vitae augue a enim imperdiet euismod quis in sem. Ut blandit tempus efficitur. Duis sollicitudin dictum vulputate. Donec diam elit, porttitor eget nunc a, faucibus maximus mauris. Nulla dolor ligula, aliquam sed iaculis et, condimentum egestas tellus. Proin condimentum placerat purus in gravida. Fusce condimentum ut metus eget lacinia. Curabitur cursus cursus tellus ut varius. Nulla id condimentum turpis. Etiam sed risus interdum, gravida sapien non, tristique urna. Aenean tincidunt diam sem, ac posuere erat efficitur eget. Etiam rhoncus urna eget nisl posuere, eu facilisis libero pellentesque. Ut volutpat turpis id sem dapibus vestibulum. Nam efficitur aliquet urna quis volutpat. Sed id tempus diam. Sed vitae aliquam tellus. Aenean cursus velit sit amet finibus efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum ligula, ullamcorper id sollicitudin eu, pretium vel ipsum."),
),
)

Lalu bagaimana kalau isi kontennya lebih dari satu child? Karena di dalam SingleChildScrollView kita hanya bisa menampung sebuah child. Untuk kasus itu kita bisa gunakan ListView atau Widget Scrollable lain yang nanti akan dibahas pada post selanjutnya. Untuk variasi di dalam SingleChildScrollView kita bisa isi dengan Row atau Column agar bisa diisi dengan banyak konten.

Selamat mencoba :)