หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

ภาพหน้าจอ

Flutter.dev เว็บไซต์ - สร้างขึ้นใหม่ใน Flutter

เว็บไซต์ Flutter.dev ตอนนี้ Flutter!

ดูเว็บไซต์ Flutter

เวอร์ชัน html

เวอร์ชันผ้าใบ

ภาพหน้าจอ

เดสก์ท็อป แท็บเล็ต มือถือ
ภาพหน้าจอภาพหน้าจอภาพหน้าจอ

เกี่ยวกับ

เทมเพลตนี้ถูกสร้างขึ้นสำหรับงานนำเสนอสัปดาห์ Flutter เกี่ยวกับการสร้างเว็บไซต์ที่ตอบสนองด้วยเฟรมเวิร์ก Responsive Flutter

หากคุณชอบโครงการนี้หรือช่วยคุณได้โปรดฝากอีเมลไว้เพื่ออัปเดต แม้ว่าจะไม่จำเป็น แต่ฉันก็ขอบคุณมาก!

วิดีโอ

สร้างเว็บไซต์ flutter ที่ตอบสนองได้อย่างง่ายดาย - การนำเสนอ Flutter Week

29:45 - สร้างเว็บไซต์ Flutter ใหม่ใน Flutter

ส่วนประกอบ

เลือกส่วนประกอบที่มีคำอธิบายการพัฒนาและการตอบสนองการใช้กรอบการใช้งาน

ม้าหมุนอนิเมชั่น

ภาพหน้าจอ

ส่วนประกอบม้าหมุนอนิเมชั่นนั้นสะดุดตาและสวยงาม โชคดีที่การสร้างมันด้วยความกระพือเป็นเรื่องง่ายมาก สิ่งที่เราต้องการคือการสร้างโครงร่างภาพเคลื่อนไหวก่อน!

แอนิเมชั่นสามารถแบ่งออกเป็น carousel slide element และส่วนประกอบ animation แต่ละองค์ประกอบเป็นเลเยอร์ในนั่งร้านแอนิเมชั่นของเราที่มีความรับผิดชอบและตรรกะของตัวเอง

  • carousel - มีสไลด์ม้าหมุน 4 ตัว แต่ละสไลด์จะแสดงประมาณ 6400 มิลลิวินาที ความรับผิดชอบของม้าหมุนคือการถือสไลด์เด็กและประสานงานการเปลี่ยนแปลงของพวกเขา 

      carousel

  • slide - แต่ละสไลด์มีรูปภาพและข้อความที่ปรากฏและหายไปพร้อมกับการเข้าและออกจากภาพเคลื่อนไหว ความรับผิดชอบของสไลด์คือการจัดตำแหน่งองค์ประกอบลูกและประสานงานแอนิเมชั่นของพวกเขา 

      carousel_slide_1
  carousel_slide_2
  carousel_slide_3
  carousel_slide_4
  model_carousel_item_animation

  • element - องค์ประกอบเป็นเนื้อหาของสไลด์ องค์ประกอบเป็นวิดเจ็ตธรรมดาที่ไม่ทราบว่าพวกเขาจะเคลื่อนไหวอย่างไร ข้อกำหนดเพียงอย่างเดียวของพวกเขาคือการสนับสนุนการเคลื่อนไหว ลอจิกแอนิเมชันถูกแยกออกจากเลเยอร์แยกต่างหาก 

      carousel_text
  Image

  • animation - พฤติกรรมการเคลื่อนไหว ภาพเคลื่อนไหวเปิดเผยอินเทอร์เฟซที่แอนิเมชั่นเช่นสไลด์ของเราสามารถใช้เพื่อควบคุมสถานะภาพเคลื่อนไหว 

      animation_slide_up_down_fade

ด้วยการสร้างภาพเคลื่อนไหวแบบแอนิเมชั่นการสร้างภาพเคลื่อนไหวนั้นง่ายมาก

  1. สร้างสไลด์
  2. เพิ่มองค์ประกอบสไลด์
  3. ใช้แอนิเมชั่นเพื่อเลื่อนองค์ประกอบ
  4. ประสานงานองค์ประกอบและออก
  5. เพิ่มสไลด์ลงในม้าหมุน

ในที่สุดแอนิเมชั่นทั้งหมดถูกห่อหุ้มด้วย ResponsiveWrapper และให้ความกว้างและความสูง MediaQuery อ้างอิง สิ่งนี้ช่วยให้ม้าหมุนแสดงได้อย่างถูกต้องทุกขนาดหน้าจอ 

  ResponsiveWrapper (
      maxWidth : 1200 ,
      minWidth : 1200 ,
      defaultScale : true ,
      mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
      child : Carousel ()
    )

นั่งร้านแอนิเมชั่นถูกสร้างขึ้นตามรูปแบบแอนิเมชั่นไทม์ไลน์ ระยะเวลาของแอนิเมชั่นทั้งหมดนั้นสัมพันธ์กันซึ่งช่วยให้สามารถปรับแต่งและปรับเปลี่ยนได้ง่ายในอนาคต หวังว่าวันหนึ่งจะมีคนสร้างตัวแก้ไขการลากและวางแอนิเมชันสำหรับ Flutter ที่จะสร้างรหัสทั้งหมดโดยอัตโนมัติ

คุณสมบัติ

ภาพหน้าจอ

ส่วนคุณสมบัติเป็นแถวง่ายพร้อมส่วนประกอบคุณสมบัติ นั่นคือจนกว่าเลย์เอาต์จะแคบลงและมีที่ว่างไม่เพียงพอสำหรับแถว จากนั้นมันจะต้องกลายเป็นคอลัมน์!

ResponsiveRowColumn ช่วยในการเปลี่ยนแปลงระหว่างเค้าโครงแถวและคอลัมน์ที่ขนาดหน้าจอที่แตกต่างกัน เมื่อ rowColumn เป็นจริงเลย์เอาต์เป็นแถว เมื่อ rowColumn เป็นเท็จเค้าโครงเป็นคอลัมน์ 

 ResponsiveRowColumn (
        rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
        children : [
          ResponsiveRowColumnItem (
            child : Feature ()
            )
        ]
    )

รายละเอียดคุณสมบัติ

ภาพหน้าจอ

ส่วนประกอบรายละเอียดคุณสมบัติมีเนื้อหาสองแถวแต่ละรายการมีเปอร์เซ็นต์ความกว้างที่แตกต่างกัน ความสมดุลที่นี่คือ 7: 5 โดยมีกราฟิกใช้พื้นที่มากกว่าข้อความเล็กน้อย พฤติกรรมนี้สามารถสร้างขึ้นได้โดยการตั้งค่า Flex สำหรับแต่ละแถว อย่างไรก็ตามต้องลบความยืดหยุ่นเมื่อเค้าโครงอยู่ในโหมดคอลัมน์เพื่อหลีกเลี่ยงข้อผิดพลาดข้อ จำกัด ที่ไม่ถูกต้อง

ResponsiveRowColumnItem ใช้ในการห่อเด็กในวิดเจ็ต Flexible เมื่ออยู่ในเค้าโครงในแถวหรือคอลัมน์ เมื่อตั้งค่า rowFlex เด็กจะถูกห่อหุ้มด้วย Flexible ด้วยค่า Flex ที่ 5 ในทำนองเดียวกัน columnFlex ให้พฤติกรรมเดียวกันสำหรับเค้าโครงคอลัมน์ เลย์เอาต์ได้รับการสืบทอดมาจากค่า isRowColumn ของ ResponsiveRowColumn ปกครอง 

 ResponsiveRowColumnItem (
        rowFlex : 5 ,
        columnOrder : 1 ,
        child : FeatureDetail (),
    )

ความท้าทายในการตอบสนองอื่นคือการสั่งซื้อรายการ ในการควบคุมลำดับเฉพาะของรายการในเค้าโครงแถวหรือคอลัมน์ให้ตั้งค่า rowOrder หรือ columnOrder

กระพือ

ภาพหน้าจอ

น่าทึ่งกระพือปีกภายในกระพือ! มันใช้งานได้ .. Iframes ที่ฝังอยู่ใน Flutter Web มีปัญหาบางอย่าง

ความคิดสุดท้าย

Flutter Web เป็นปรากฎการณ์และสนุกมากที่ได้แก้ปัญหาสำคัญบางประการของการตอบสนองบนเว็บ แม้จะมีทุกปีที่ผ่านมาฉันได้ทำการพัฒนาเว็บเทมเพลตนี้เป็นเว็บไซต์ที่ "สมบูรณ์แบบ" มากที่สุดที่ฉันเคยสร้างมา ขอบคุณพลังของกรอบการทำงานพื้นฐานฉันรู้อย่างแม่นยำว่าเค้าโครงดูทุกขนาดอย่างไร

Flutter Web เป็นการปฏิวัติ แต่ก็ยังมีงานอีกมากที่ต้องทำ ในบางพื้นที่ Flutter อยู่ข้างหน้าแล้ว แต่ในอื่น ๆ ระบบนิเวศนั้นอยู่เบื้องหลังหลายปี สำหรับความท้าทายข้างหน้ามาจัดการกับพวกเขาด้วยกันและแก้ปัญหาหลัก

การสร้างเว็บไซต์ Flutter นี้ยังเปิดเผยจุดปวดเล็กน้อย โปรดแจ้งให้เราทราบหากคุณกำลังทำงานหรือสนใจที่จะจัดการกับหนึ่งในรายการด้านล่าง

  • ตัวแก้ไขแอนิเมชั่น
  • เครื่องกำเนิด RichText
  • เฟรมเวิร์ก Flutter Analytics

กิตติกรรมประกาศ❤

แรงบันดาลใจ:

กระพือ

การพัฒนา:

  • เรย์ลี่

สปอนเซอร์: ไร้รหัส - แอพพลิเคชั่น UI และตัวสร้างเว็บไซต์



ใบอนุญาต

เทมเพลตเว็บไซต์ 

 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.

flutter.dev 

 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/
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด