bluff

خدعة

إخلاء المسؤولية: لقد بنيت هذا لاحتياجاتي الخاصة، لذلك لا تتوقع أن يكون كاملاً. إنه اختراق لعطلة نهاية الأسبوع، استخدمه على مسؤوليتك الخاصة!

Bluff عبارة عن منشئ مواقع ويب ثابت مكتوب بلغة رمي السهام مستوحى من عناصر واجهة المستخدم Flutter.

لماذا ؟

لقد بدأت هذا المشروع لأنني سئمت من التبديل إلى بيئة JS في كل مرة أحتاج فيها إلى كتابة موقع ويب ثابت صغير. أردت أن يكون المفهوم أقرب إلى Flutter قدر الإمكان، مرة أخرى، للحفاظ على نفس الطريقة في تطوير واجهات المستخدم وعدم إضاعة الوقت في إعادة تعلم النماذج مرارًا وتكرارًا.

لماذا لا تستخدم Flutter للويب؟

فقط لأنني أردت موقعًا إلكترونيًا خفيف الوزن يحتوي على مُحسّنات محرّكات بحث جيدة. يجب أن يكون الترحيل إلى Flutter للويب بسيطًا جدًا.

الاستخدام

مثال بسيط للاستخدام:

 import 'package:bluff/bluff.dart' ;

Future main () async {
  final app = Application (
    availableSizes : [
      MediaSize .small,
      MediaSize .medium,
    ],
    supportedLocales : [
      Locale ( 'fr' , 'FR' ),
      Locale ( 'en' , 'US' ),
    ],
    routes : [
      homeRoute,
    ],
  );
  ;

  await publish (app);
}

final homeRoute = Route (
  title : (context) {
    final locale = Localizations . localeOf (context);
    if (locale.languageCode == 'fr' ) return 'Accueil' ;
    return 'Home' ;
  },
  relativeUrl : 'index' ,
  builder : (context) => Home (),
);

class Home extends StatelessWidget {
  @override
  Widget build ( BuildContext context) {
    final mediaQuery = MediaQuery . of (context);
    final theme = Theme . of (context);
    return Column (
      crossAxisAlignment : CrossAxisAlignment .stretch,
      children : < Widget > [
        Flex (
          direction : mediaQuery.size == MediaSize .small
              ? Axis .vertical
              : Axis .horizontal,
          children : < Widget > [
            Expanded (
              child : Container (
                height : 300 ,
                decoration : BoxDecoration (
                  image : DecorationImage (
                    image : ImageProvider . asset ( 'images/logo_dart_192px.svg' ),
                  ),
                ),
              ),
            ),
            Padding (
              padding : EdgeInsets . all ( 20 ),
              child : Text ( 'Hello world!' ),
            ),
            Container (
              width : 200 ,
              height : 200 ,
              decoration : BoxDecoration (
                color : const Color ( 0xFF0000FF ),
                borderRadius : BorderRadius . circular ( 5 ),
                boxShadow : [
                  BoxShadow (
                    color : const Color ( 0xAA0000FF ),
                    blurRadius : 10 ,
                    offset : Offset ( 10 , 10 ),
                  ),
                ],
              ),
            ),
            Image . asset (
              'images/logo_dart_192px.svg' ,
              fit : BoxFit .cover,
            ),
            Click (
              newTab : true ,
              url : 'https://www.google.com' ,
              builder : (context, state) {
                return Container (
                  child : Text (
                    'Button' ,
                    style : theme.text.paragraph. merge (
                      TextStyle (
                        color : state == ClickState .hover
                            ? const Color ( 0xFFFFFFFF )
                            : const Color ( 0xFF0000FF ),
                      ),
                    ),
                  ),
                  padding : EdgeInsets . all ( 20 ),
                  decoration : BoxDecoration (
                    color : state == ClickState .hover
                        ? const Color ( 0xFF0000FF )
                        : const Color ( 0x440000FF ),
                    borderRadius : BorderRadius . circular ( 5 ),
                  ),
                );
              },
            )
          ],
        )
      ],
    );
  }
}