Sử dụng Pug và Sass trong Flutter với chế độ xem rung

Mặc dù tôi yêu thích Flutter, nhưng khi tôi lần đầu tiên đến với nó từ thế giới phát triển web, tôi đã hơi băn khoăn với cách cấu trúc của nó. Logic, phong cách và đánh dấu tất cả ở một nơi và được trộn lẫn với nhau trong rất nhiều dấu ngoặc và dấu phẩy. Bây giờ tôi đã phát hiện ra chế độ xem rung , nó ngay lập tức trở thành một trong những công cụ chính của tôi khi làm việc với Flutter.

Flaming-view không phải là sự thay thế cho Dart, cũng không phải là hoàn toàn cho phép ta sử dụng Pug và Sass một cách bay bổng. Đó là một bổ sung cho quy trình làm việc của ta bằng cách cho phép ta tách biệt chế độ xem và phát triển nó theo cách rõ ràng hơn. Ta được cung cấp cú pháp của Pug và Sass (hoặc HTML và CSS), với thụt lề, mixin, vòng lặp và các tính năng bổ sung khác, nhưng ta vẫn bị giới hạn trong giới hạn của các widget mà ta đang sử dụng. Điều này nên được ghi nhớ bởi vì, ít nhất đối với tôi, vẫn rất dễ dàng tiếp cận với thứ gì đó mà CSS cho phép và tự hỏi tại sao không có gì hoạt động, chẳng hạn như sử dụng CSS Grid hoặc thêm chiều rộng vào tiện ích cột.

Nếu bạn không quen với Pug hoặc một chút rỉ sét, bạn có thể chải lông cho nó tại đây hoặc tìm hiểu một số điều tuyệt vời mà Sass sẽ cho bạn làm ở đây .

Cài đặt và cài đặt

Flaming-view vẫn là một gói khá mới, vì vậy tôi khuyên bạn nên xem phiên bản mới nhất và tài liệu để biết bất kỳ thay đổi nào.

$ flutter create flutter_view_example

package.yml

dependencies:   flutter:     sdk: flutter   flutter_view_widgets: ^1.0.6

Đến đây bạn cần phải mở hai terminal , một terminal để chạy flutter-view và terminal kia dành cho ứng dụng của bạn. Tất cả những gì nó cần là vị trí của mã mà ta muốn biên dịch, thường là folder lib và cờ theo dõi.

$ flutter-view -w lib

Pug / HTML

Cấu trúc file của ta tương tự như những gì bạn thấy trong React hoặc Angular với mọi màn hình và thành phần trong folder riêng của chúng với file Pug và Sass của ta . Flaming-view sẽ tự động tạo một file Dart mới dựa trên cả hai file này.

* lib 📂    * screens 📂      * loader 📂       * loader.pug        * loader.sass    * main.dart

Sau khi nhập gói Flutter-view, ta có thể bắt đầu tạo các widget Flutter bằng cú pháp Pug. Ta có thể tạo một widget không trạng thái mới bằng cách chỉ cần thêm một thẻ và chuyển nó (flutter-view) .

Bây giờ tất cả các widget đều là chữ thường và các từ được phân tách bằng dấu gạch nối, do đó appBar trở thành app-bar . Tạo một lớp mới sẽ tạo một containers trống mà ta có thể tham chiếu trong file Sass. Ta cũng có thể kiểm soát những gì nó được gắn nhãn là trong tiện ích con với thuộc tính as .

home.pug

home(flutter-view)     scaffold         app-bar(as='appBar')             .siteName(as='title') Welcome

Khi bạn lưu file này, một file home.dart mới sẽ được tạo, nếu ta xem qua bên trong, ta sẽ thấy một cái gì đó khá thú vị.

import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter_view_widgets/flutter_view_widgets.dart';  Scaffold Home() {   return Scaffold( // project://lib\home\home.pug#4,2     appBar: AppBar( // project://lib\home\home.pug#5,3       title:        //-- TITLE ----------------------------------------------------------       Container( // project://lib\home\home.pug#6,4         child: Text(            'Alligator.io',         ),       ),     ),   ); }

Flagship-view thậm chí comment mọi thứ để giúp bạn dễ dàng tìm thấy thứ gì đó khi bạn đang gỡ lỗi.

Nếu trình biên dịch bắt đầu gặp khó khăn về thụt lề mà không có lý do gì, hãy khởi động lại editor , đôi khi nó sẽ như vậy.

Bất kỳ thuộc tính nào ta cần khai báo cho một widget đều có thể được chuyển vào như một đối số bình thường, tuân theo cùng một định dạng đặt tên như widget. Nếu bạn cần thực hiện bất cứ điều gì với các hàm, bạn có thể đặt trước nó bằng @ để đặt nó trong dấu ngoặc hoặc :^ để xuất nguyên trạng, được sử dụng tốt nhất cho các hàm mũi tên.

home.pug

import(package='flutter_view_widgets/flutter_view_widgets.dart')  loader(flutter-view)     scaffold         app-bar(as='appBar' center-title=true).bar             .siteName(as='title') Alligator.io          .bg(as='body')              column: array(as='children')                 .logo                  .slogan Front-End Web Development, Chewed Up                 .subSlogan Angular 2+, Vue.js, React, Svelte JavaScript, CSS, Node.js...                 .btnText: button(:^on-pressed="() => print('Hello World')") See all posts

Sass

Đáng buồn thay, đây không phải là CSS như bạn biết, chỉ đơn thuần là cú pháp. Ta không có CSS Grid , không có Flexbox , thậm chí không có bất kỳ rems hoặc tỷ lệ phần trăm nào. Ta chỉ giới hạn đối với các thuộc tính đã có trên từng tiện ích cụ thể.

Ta có thể chọn các containers của bạn trực tiếp hoặc với các lớp / id của chúng.

global.sass

$solorized-light: #073642 $solorized-dark: #002b36  app-bar     background-color: $solorized-light  .bg       background-color: $solorized-dark     width: 500

Đối với một số thuộc tính, có một số sửa đổi để ảnh hưởng đến những gì được tạo, vì vậy, bây giờ background-image có thể lấy url() hoặc asset() để sử dụng nội dung nào đó local hoặc nguồn bên ngoài. Bạn có thể tìm thấy danh sách đầy đủ các thuộc tính đã sửa đổi tại đây .

home.sass

@import '../global.sass'  .logo      background-image: url("https://aws1.discourse-cdn.com/netlify/original/2X/3/3c2117abab23d3cb409b49f75ca0ef8f46bb005c.png")     height: 300     width: 300 .slogan      color: #fff     font-size: 30     text-align: center  .subSlogan      @extend .slogan      margin-top: 15     font-size: 15     width: 300  .btnText      margin-top: 40     font-size: 25     width: 200     height: 50     border-radius: 40     button          color: $solorized-light         text-color: white

Ví dụ về ảnh chụp màn hình ứng dụng

Khi bạn đã quen với quá trình này, việc tạo ra thứ gì đó như thế này sẽ dễ dàng mất một nửa thời gian so với Dart tiêu chuẩn.

Cấu hình bổ sung

Flaming-view cung cấp cho ta một lượng kiểm soát tốt đối với các file đã tạo của ta . Bạn chỉ cần một file tin flutter-view.json ở folder root của dự án và bạn đã sẵn sàng.

Ở đây, ta chỉ nói với nó rằng hãy thêm gói chế độ xem rung vào các file được tạo theo mặc định và ta đang ánh xạ lại button từ RaisedButton thành FlatButton .

flay-view.json

{     "imports": [         "package:flutter_view_widgets/flutter_view_widgets.dart"     ],     "tagClasses": {         "button": "FlatButton"     } }

Bớt tư tưởng

Chỉ với một vài dòng, ta đã có thể tạo dễ dàng gấp 2-3 lần số lượng mã Dart mà không phải lo lắng về lỗi dấu ngoặc đơn hoặc lỗi loại. Thêm vào đó, việc có một cách tạo hỗn hợp, vòng lặp và điều kiện sạch sẽ giúp cho việc phát triển trở nên nhanh chóng và thú vị hơn rất nhiều.

Chế độ xem rung động đã nhanh chóng trở thành mục tiêu của tôi cho tất cả các dự án cá nhân của tôi và tôi hy vọng nó cũng sẽ dành cho bạn.

Tags:

Các tin liên quan