Perhatikan Tutorial Menampilkan Video di Flutter – Tutorial Flutter Indonesia

Flutter merupakan framework dengan bahasa pemrograman Dart yang dibesarkan Google. Perhatikan Tutorial Menampilkan Video di Flutter – Tutorial Flutter Indonesia. Walaupun awal mulanya cuma dipakai buat membuat aplikasi mobile( Android serta iOS), framework ini telah mensupport pengembangan aplikasi berplatform website.

Kemudian, gimana metode membuat laman website dengan Flutter betul?

Perhatikan Tutorial Menampilkan Video di Flutter – Tutorial Flutter Indonesia Bimbingan ini pastinya sesuai untuk Kamu yang terkini memahami Flutter Website serta mau mempelajarinya lebih dalam.

Catatan isi

tutup

1 Metode Membuat Website dengan Flutter

1. 1 1. Instalasi Flutter SDK

1. 2 2. Install Plugin Flutter& Dart di VS Code

1. 3 3. Setup di Visual Sanggar Code

1. 3. 1 Memakai Flutter pada Channel Stable

1. 3. 2 Melaksanakan Upgrade Flutter

1. 3. 3 Membenarkan Browser yang dipakai Mendukung

1. 4 4. Melaksanakan Aplikasi Web

1. 5 5. Membuat Laman Website dengan Flutter

1. 5. 1 Tahap 1– Membuat Berkas Assets

1. 5. 2 Tahap 2– Membuat Bentuk Project

1. 5. 3 Tahap 3– Build& Deploy Flutter Website App

2 Mengapa Memakai Flutter?

3 Telah Sedia Membuat Flutter Website Awal Kamu?

Metode Membuat Website dengan Flutter

Saat sebelum mengawali bimbingan membuat laman website dengan flutter, yakinkan Kamu telah menginstall Visual Sanggar Code selaku Ilham pada pc Kamu.

Bila Visual Sanggar Code telah terinstall, Kamu bisa langsung membuat aplikasi website yang Kamu mau. Ayo, langsung saja pelajari langkah- langkahnya!

1. Instalasi Flutter SDK

Awal, berangkat ke laman unduh flutter serta seleksi sistem pembedahan yang Kamu maanfaatkan. Pada bimbingan kali ini, kita memakai Windows.

Setelah itu, klik tombol installer. zip semacam pada lukisan di dasar ini buat mendownload file.

Unduh flutter

Kedua, ekstrak file. zip yang sudah di unduh. Kemudian pindahkan hasil ekstraksi ke drive C. Janganlah taruh di dalam berkas C: Program Files, sebab hendak memunculkan permasalahan terpaut dengan hak akses.

ekstrak flutter

Ketiga, tambahkan path pada system environment dengan metode ketik“ environment” pada kolom pencarian di Windows. Kemudian, masuk ke pengaturan Edit the system environment variables.

Berikutnya, klik tab Advanced serta seleksi Environment Variables.

Edit environment variables

Seleksi bagian Path, setelah itu klik tombol Edit.

Path environment variables

Klik tombol New buat meningkatkan path. Arahkan path ke berkas bin yang ada pada berkas flutter. Janganlah kurang ingat klik OK buat menaruh pergantian.

New path for flutter

Kelima, lakukanlah restart system.

2. Install Plugin Flutter& Dart di VS Code

Pertama- tama, bukalah aplikasi Visual Sanggar Code. Setelah itu, klik menu Extensions yang ada pada sidebar aplikasi.

Seleksi menu extensions

Ketiklah‘ flutter’ pada kolom pencarian Extensions serta seleksi yang sangat atas semacam pada lukisan di dasar. Kemudian, klik Install serta menunggu sebagian dikala.

Cari plugin Flutter

Dengan cara default, cara instalasi extensions flutter hendak otomatis menginstall plugin Dart pula.

Nah, bila flutter telah terinstall, ketik‘ Dart’ pada kolom pencarian extensions. Bila bentuk Visual Sanggar Code Kamu semacam lukisan di dasar ini, maksudnya Dart telah terinstall dengan bagus.

Cari plugin dart

Tetapi, bila Dart belum terinstall, klik tombol Install serta menunggu cara instalasinya.

3. Setup di Visual Sanggar Code

Kamu butuh melaksanakan setup di Visual Sanggar Code supaya flutter bisa dijalani. Tahap setup yang dicoba, mencakup:

Memakai flutter pada channel stable

Melaksanakan upgrade flutter

Membenarkan browser yang dipakai mendukung

Memakai Flutter pada Channel Stable

Buat melaksanakan set up Flutter di Visual Sanggar Code, Kamu butuh membuka halte. Arahkan kursor pada menu Halte
New Halte.

Buka halte terkini di VS Code

Aplikasi yang terbuat memakai Flutter 2. x dengan cara otomatis sudah mensupport pengembangan aplikasi website pada channel stable.

Oleh sebab itu, silahkan jalankan perintah selanjutnya ini pada halte VS Code Kamu:

flutter channel stable

Nah, esok outputnya hendak semacam ini:

flutter channel stable

Melaksanakan Upgrade Flutter

Melaksanakan channel stable hendak mengambil alih tipe flutter dikala ini dengan tipe normal, cara ini hendak menyantap durasi yang lumayan lama bila koneksi Kamu lelet.

Berikutnya, Kamu butuh melaksanakan upgrade buat memperoleh tipe stable yang terkini dengan metode melaksanakan perintah selanjutnya ini:

flutter upgrade

Bila telah terdapat flutter tipe terkini, perintah di atas hendak melaksanakan upgrade semacam lukisan di dasar ini. Kamu wajib menunggu sebagian dikala hingga cara upgrade berakhir.

flutter upgrade

Tetapi, bila Kamu telah memakai tipe yang terkini, sistem hendak langsung menunjukkan data tipe flutter serta dart yang Kamu maanfaatkan dikala ini.

Flutter already up to date

Membenarkan Browser yang dipakai Mendukung

Dalam cara pengembangan aplikasi website, flutter pasti membutuhkan website browser buat melaksanakan aplikasinya. Buat memeriksa apakah website browser Kamu telah tersambung dengan flutter, Kamu bisa melaksanakan perintah:

flutter devices

Nah, perintah di atas hendak membagikan output website browser apa saja yang tersambung dengan flutter di pc Kamu, semacam ini:

flutter devices

Yakinkan langkah- langkah di atas dicoba dengan betul supaya tidak terjalin error. Sehabis itu, waktunya melaksanakan aplikasi Flutter.

4. Melaksanakan Aplikasi Web

Kamu bisa membuat project flutter website awal Kamu dengan melaksanakan perintah selaku selanjutnya:

flutter create app_pertama

Pada perintah diatas, app_pertama ialah julukan project terkini yang terbuat. Kamu bisa mengubahnya cocok dengan julukan project Kamu sendiri, betul.

Bila project terkini sudah sukses terbuat, Kamu hendak memperoleh catatan All done! semacam pada lukisan selanjutnya ini.

Sukses membuat project flutter web

Supaya aplikasi website bisa dijalani, Kamu wajib masuk ke direktori project yang terkini terbuat dengan memakai perintah:

cd app_pertama

Dikala awal kali membuat project terkini, berkas project Kamu hendak diisi oleh folder- folder serta file yang diperlukan dalam pengembangan aplikasi website dengan flutter. Selanjutnya ini ialah bentuk project flutter website:

Bentuk project flutter web

Kamu bisa melaksanakan test apakah aplikasi Kamu berjalan ataupun tidak dengan metode melaksanakan aplikasi awal Kamu memakai perintah selanjutnya ini.

flutter run- d chrome

Perintah itu hendak melaksanakan aplikasi memakai Google Chrome selaku website browser. Menunggu sebagian dikala hingga Chrome terbuka serta timbul bentuk semacam ini.

Melaksanakan flutter web

Nah, bila aplikasi default flutter website telah sukses dijalani, saat ini mari coba membuat laman website pertamamu!

5. Membuat Laman Website dengan Flutter

Pada bimbingan ini, kami

membuat laman landing page memakai flutter website selaku ilustrasi. Esoknya hasilnya hendak semacam ini:

Ilustrasi membuat laman website dengan Flutter

Selanjutnya ini tahap buatnya:

Tahap 1– Membuat Berkas Assets

Berkas Assets berperan buat menaruh assets yang hendak Kamu maanfaatkan dalam membuat aplikasi website. Assets yang kita maanfaatkan buat membuat landing page ini merupakan assets berbentuk lukisan serta font.

Oleh sebab itu, supaya nampak apik, buat berkas terkini assets atau image serta assets atau font di dalam direktori project. Setelah itu, isi berkas image dengan lukisan yang hendak Kamu maanfaatkan buat membuat project ini.

Sebaliknya pada berkas font, isilah dengan font yang Kamu gunakan. Bila tidak mengenakan font bonus pula tidak apa- apa kenapa mengenakan font default saja. Nah, bentuk foldernya hendak semacam ini:

Membuat berkas assets

Berikutnya, silahkan buka file pubspec. yaml setelah itu tambahkan package serta assets selanjutnya ini:

name: flutter_webpage

description: A new Flutter project.

version: 1. 0. 0+1

environment:

sdk:”
=2. 1. 0<3. 0. 0″

dependencies:

flutter:

sdk: flutter

cupertino_icons:^0. 1. 2

dev_dependencies:

flutter_test:

sdk: flutter

flutter:

uses- material- design: true

assets:

– assets atau images atau lp_image. png

fonts:

– family: Montserrat

fonts:

– asset: assets atau fonts atau Montserrat- Bold. ttf

– asset: assets atau fonts atau Montserrat- Regular. ttf

Janganlah kurang ingat tekan tombol Ctrl+ S pada keyboard Kamu buat menaruh pergantian pada file.

Tahap 2– Membuat Bentuk Project

Pada langkah ini, silahkan buat berkas serta file di dalam berkas lib dengan bentuk semacam pada lukisan di dasar ini:

Membuat Bentuk Project

File LandingPage. dart hendak bermuatan isyarat buat bagian penting landing page. Kamu bisa memindahkan serta memakai isyarat di dasar ini.

import package: flutter atau material. dart;

class LandingPage extends StatelessWidget

List<Widget
pageChildren( double width)

return<Widget
[

Kontainer(

width: width,

child: Column(

crossAxisAlignment: CrossAxisAlignment. mulai,

children:<Widget
[

Text(

” Unlimited Website Hosting nIndonesia”,

gaya: TextStyle(

fontWeight: FontWeight. bold,

fontSize: 40. 0,

color: Colors. white),

),

Padding(

padding: const EdgeInsets. symmetric( vertical: 20. 0),

child: Text(

” Layanan website hosting Indonesia terbaik dengan fitur hosting terlengkap serta sokongan support 24 jam buat keringanan Kamu mencapai keberhasilan online!”,

gaya: TextStyle( fontSize: 16. 0, color: Colors. white),

),

),

MaterialButton(

color: Colors. red,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius. all( Radius. circular( 20. 0))),

onPressed:(),

child: Padding(

padding: const EdgeInsets. symmetric(

vertical: 20. 0, mendatar: 40. 0),

child: Text(

” Seleksi Saat ini”,

gaya: TextStyle( color: Colors. white),

),

),

)

],

),

),

Padding(

padding: const EdgeInsets. symmetric( vertical: 20. 0),

child: Image. asset(

” assets atau images atau lp_image. png”,

width: width,

),

)

];

 

@override

Widget build( BuildContext context)

return LayoutBuilder(

builder:( context, constraints)

if( constraints. maxWidth
800)

return Row(

mainAxisAlignment: MainAxisAlignment. center,

children: pageChildren( constraints. biggest. width atau 2),

);

else

return Column(

children: pageChildren( constraints. biggest. width),

);

 

,

);

 

 

File Navbar. dart hendak bermuatan isyarat buat bagian navigation kafe dari landing page. Silahkan alih isyarat selanjutnya ini.

import package: flutter atau material. dart;

class Navbar extends StatelessWidget

@override

Widget build( BuildContext context)

return LayoutBuilder(

builder:( context, constraints)

if( constraints. maxWidth
1200)

return DesktopNavbar();

else if( constraints. maxWidth
800&& constraints. maxWidth< 1200)

return DesktopNavbar();

else

return MobileNavbar();

 

,

);

 

 

class DesktopNavbar extends StatelessWidget

@override

Widget build( BuildContext context)

return Padding(

padding: const EdgeInsets. symmetric( vertical: 25, mendatar: 40),

child: Kontainer(

child: Row(

mainAxisAlignment: MainAxisAlignment. spaceBetween,

children:<Widget
[

Text(

” NIAGAHOSTER”,

gaya: TextStyle(

fontWeight: FontWeight. bold,

color: Colors. white,

fontSize: 30),

),

Row(

children:<Widget
[

Text(

” HOSTING”,

gaya: TextStyle( color: Colors. white),

),

SizedBox(

width: 30,

),

Text(

” CLOUD VPS”,

gaya: TextStyle( color: Colors. white),

),

SizedBox(

width: 30,

),

Text(

” Daerah”,

gaya: TextStyle( color: Colors. white),

),

SizedBox(

width: 30,

),

Text(

” Untuk Web”,

gaya: TextStyle( color: Colors. white),

),

SizedBox(

width: 30,

),

MaterialButton(

color: Colors. pink,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius. all( Radius. circular( 20. 0))),

onPressed:(),

child: Text(

” LOGIN”,

gaya: TextStyle( color: Colors. white),

),

)

],

)

],

),

),

);

 

 

File bermain. dart bermuatan isyarat material app serta widget yang dipakai, janganlah kurang ingat buat import file LandingPage. dart serta Navbar. dart yang telah terbuat tadinya.

import package: flutter atau material. dart;

import package: flutter_webpage atau LandingPage atau LandingPage. dart;

import package: flutter_webpage atau Navbar atau Navbar. dart;

void bermain()=
runApp( MyApp());

class MyApp extends StatelessWidget

@override

Widget build( BuildContext context)

return MaterialApp(

title: Flutter Demo Landing Page,

theme: ThemeData( primarySwatch: Colors. blue, fontFamily:” Montserrat”),

home: MyHomePage(),

);

 

 

class MyHomePage extends StatelessWidget

@override

Widget build( BuildContext context)

return Scaffold(

body: Kontainer(

decoration: BoxDecoration(

gradient: LinearGradient(

begin: Alignment. centerLeft,

end: Alignment. centerRight,

colors:[

Color. fromRGBO( 50, 20, 195, 1. 0),

Color. fromRGBO( 36, 11, 54, 1. 0)

]),

),

child: SingleChildScrollView(

child: Column(

children:<Widget
[

Navbar(),

Padding(

padding: const EdgeInsets. symmetric(

vertical: 20. 0, mendatar: 40. 0),

child: LandingPage(),

)

],

),

),

),

);

 

 

Nah, sehabis bentuk project ditentukan telah terbuat dengan bagus, saat ini coba jalankan perintah flutter run- d chrome buat memandang bentuk dari landing page yang sudah Kamu untuk.

Tahap 3– Build& Deploy Flutter Website App

Bila Kamu mau meng- upload aplikasi flutter website ke hosting, Kamu butuh melaksanakan perintah selanjutnya ini buat melaksanakan build project:

flutter build web

Perintah itu hendak membuat berkas terkini bernama build semacam pada lukisan di dasar ini.

flutter build web

Bila Kamu telah sedia untuk

men- deploy aplikasi website, upload seluruh berkas serta file yang terdapat pada berkas build atau website ke layanan hosting Kamu.

Baca Pula: Metode Upload Web ke Hosting

Mengapa Memakai Flutter?

Flutter merupakan framework yang saat ini banyak dipakai, tercantum oleh julukan besar semacam Google, Alibaba, BMW, serta Tencent.

Kamu pula dapat memakai Flutter buat meningkatkan aplikasi yang di idamkan berkah sebagian kelebihan yang dipunyanya, antara lain:

Mempunyai Material UI yang Bagus: Ada widget menawan yang bisa dicocokkan dengan gampang, bentuk desainnya juga amat baik. Kamu hendak lebih gampang buat membuat aplikasi dengan bentuk lebih menarik,

Bertabiat Cross Program: Ibaratnya, dengan sekali coding, Kamu bisa membuat aplikasi yang bisa berjalan di bermacam program memakai Flutter.

Mensupport Fast Development: Menawarkan usability yang bagus dan kecekatan penyusunan isyarat dalam cara pengembangan. Tidak hanya itu, fitur hot reload membolehkan Kamu buat memandang langsung dampak pergantian yang terjalin dari pergantian isyarat tanpa melaksanakan compile balik.

Lebih Berdaya guna: Dengan kecekatan serta keringanan yang ditawarkan, pengembangan aplikasi memakai Flutter lebih ekonomis serta irit daya. Ini pasti lumayan berguna untuk bidang usaha yang mau membuat aplikasi dengan anggaran terbatas.

Mempunyai Community yang Bertumbuh: Terus menjadi terkenal, komunitas Flutter pula terus menjadi bertumbuh cepat. Ini hendak mempermudah Kamu buat bertukar pikiran lebih jauh mengenai kemajuan framework ini.

Telah Sedia Membuat Flutter Website Awal Kamu?

Demikianlah bimbingan membuat aplikasi dengan Flutter Website. Walaupun tahap yang butuh dicoba lumayan banyak, tetapi lumayan gampang dipraktikkan oleh pendatang baru, kenapa.

Sehabis sukses membuat Flutter di website, janganlah kurang ingat buat mengonlinekannya supaya dapat diamati lebih banyak orang, betul. Aplikasi itu pasti dapat jadi portofolio yang bagus untuk Kamu selaku seseorang pengembang, bukan?

Oh iya, Kamu tidak ingin kan website yang telah dibentuk dengan bagus hadapi hambatan tidak dapat diakses? Oleh sebab itu, gunakanlah layanan hosting yang dapat diharapkan dari Niagahoster.

Mengapa sedemikian itu?

Bukan cuma supaya penampilan flutter website Kamu maksimal berkah sokongan kecekatan LiteSpeed server, tetapi pula buat membenarkan keamanannya berkah fitur Imunify360

yang menghindari serbuan malware. Dengan sedemikian itu, Kamu tidak butuh takut lagi dengan performanya.

Aku Mau Berlangganan Hosting Niagahoster Saat ini!

Mudah- mudahan bimbingan ini berguna untuk Kamu, betul. Bila terdapat kesusahan janganlah ragu buat bertukar pikiran di kolom pendapat.