FlutterWebsite
2.0.0
Situs web Flutter.dev, sekarang di Flutter!
Lihat situs web Flutter
Versi HTML
Versi kanvas
| Desktop | Tablet | Mobile |
|---|---|---|
 |  |  |
Template ini dibuat untuk presentasi Pekan Bergesi tentang membangun situs web responsif dengan kerangka kerja responsif yang berkeping.
Jika Anda menyukai proyek ini atau membantu Anda, silakan tinggalkan email Anda untuk pembaruan. Meskipun tidak diperlukan, saya sangat menghargainya!
Bangun situs web flutter responsif dengan mudah - Presentasi Pekan Gabu
29:45 - menciptakan kembali situs web Flutter di Flutter.
Pilih komponen dengan komentar pengembangan dan walkthrough penggunaan kerangka kerja responsif.
Komponen korsel animasi sangat menarik dan indah. Untungnya, menciptakannya dalam flutter sangat mudah. Yang kami butuhkan adalah membuat perancah animasi terlebih dahulu!
Animasi dapat dipecah menjadi carousel , slide , element , dan komponen animation . Setiap komponen adalah lapisan dalam perancah animasi kami dengan tanggung jawab dan logika sendiri.
carousel - Ada 4 slide korsel. Setiap slide ditampilkan selama sekitar 6400 milidetik. Tanggung jawab korsel adalah memegang slide anak dan mengoordinasikan transisi mereka.
carousel
slide - Setiap slide berisi gambar dan teks yang muncul dan menghilang dengan animasi pintu masuk dan keluar. Tanggung jawab slide adalah memposisikan elemen anaknya dan mengoordinasikan animasi mereka.
carousel_slide_1
carousel_slide_2
carousel_slide_3
carousel_slide_4
model_carousel_item_animation
element - Elemen adalah konten dari slide. Elemen adalah widget sederhana yang tidak tahu bagaimana mereka akan dianimasikan. Satu -satunya persyaratan mereka adalah mendukung animasi. Logika animasi disarikan ke lapisan terpisah.
carousel_text
Image
animation - Perilaku Animasi. Animasi mengekspos antarmuka yang dapat digunakan animator seperti slide kami untuk mengontrol status animasi.
animation_slide_up_down_fade
Dengan perancah animasi yang dibuat, membuat animasi itu sendiri sangat mudah.
Akhirnya, seluruh animasi dibungkus dengan ResponsiveWrapper dan diberi lebar dan tinggi MediaQuery referensi. Ini memungkinkan korsel untuk ditampilkan dengan benar pada ukuran layar apa pun.
ResponsiveWrapper (
maxWidth : 1200 ,
minWidth : 1200 ,
defaultScale : true ,
mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
child : Carousel ()
)Perancah animasi dibangun berdasarkan model animasi timeline. Semua durasi animasi relatif yang memungkinkan penyesuaian dan penyesuaian yang mudah di masa depan. Semoga suatu hari, seseorang akan membuat editor drag dan drop animasi untuk flutter yang akan menghasilkan semua kode secara otomatis.
Bagian fitur adalah baris sederhana dengan komponen fitur. Itu sampai tata letak menyempit dan tidak ada cukup ruang untuk barisan. Maka itu perlu menjadi kolom!
ResponsiveRowColumn membantu transisi antara tata letak baris dan kolom pada ukuran layar yang berbeda. Ketika rowColumn itu benar, tata letak adalah Row. Ketika rowColumn salah, tata letak adalah kolom.
ResponsiveRowColumn (
rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
children : [
ResponsiveRowColumnItem (
child : Feature ()
)
]
)
Komponen detail fitur memiliki dua baris konten, masing -masing dengan persentase lebar yang berbeda. Keseimbangan di sini adalah 7: 5 dengan grafik mengambil sedikit lebih banyak ruang daripada teks. Perilaku ini dapat dibuat dengan menetapkan nilai fleksibel untuk setiap baris. Namun, fleksibel perlu dilepas ketika tata letak dalam mode kolom untuk menghindari kesalahan kendala yang tidak valid.
ResponsiveRowColumnItem digunakan untuk membungkus anak -anak dalam widget Flexible saat berada di baris atau tata letak kolom. Ketika rowFlex diatur, anak akan dibungkus dengan Flexible dengan nilai fleksibel 5. Demikian juga, columnFlex memberikan perilaku yang sama untuk tata letak kolom. Tata letak diwarisi dari Nilai isRowColumn dari Parent ResponsiveRowColumn .
ResponsiveRowColumnItem (
rowFlex : 5 ,
columnOrder : 1 ,
child : FeatureDetail (),
) Tantangan responsif lainnya adalah pemesanan item. Untuk mengontrol urutan spesifik item dalam tata letak baris atau kolom, atur rowOrder atau columnOrder .
Luar biasa, Flutter di dalam Flutter! Itu berhasil .. semacam. Iframes tertanam di Web Flutter memiliki beberapa masalah.
Flutter Web sangat fenomenal dan sangat menyenangkan untuk menyelesaikan beberapa masalah penting dasar responsif di web. Terlepas dari selama bertahun -tahun saya telah melakukan pengembangan web, templat ini adalah situs web yang paling "sempurna" yang pernah saya buat. Berkat kekuatan kerangka kerja yang mendasarinya, saya tahu persis bagaimana tata letak terlihat pada setiap ukuran.
Flutter Web bersifat revolusioner tetapi masih ada banyak pekerjaan yang harus dilakukan. Di beberapa daerah, Flutter sudah ada di depan tetapi di yang lain, ekosistem ini secara harfiah bertahun -tahun di belakang. Untuk tantangan di depan, mari kita atasi secara langsung dan selesaikan masalah inti.
Membangun situs web Flutter ini juga mengekspos beberapa poin rasa sakit. Beri tahu saya jika Anda sedang mengerjakan atau tertarik untuk menangani salah satu item di bawah ini.
Inspirasi:
Perkembangan:
Sponsor: Codelessly - Aplikasi Flutter UI dan Pembuat Situs Web
BSD Zero Clause License
Copyright © 2020 Codelessly
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
Except as otherwise noted, the content of this repository is licensed under the
Creative Commons Attribution 3.0 License [1], and code samples are licensed
under the BSD License:
Copyright 2012, the project authors. All rights reserved. Redistribution and use
in source and binary forms, with or without modification, are permitted provided
that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived
from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
[1] http://creativecommons.org/licenses/by/3.0/
