bluff

절벽

면책 조항: 나는 이것을 내 필요에 따라 만들었으므로 완성될 것이라고 기대하지 마십시오. 주말 해킹이므로 위험 부담은 본인에게 있습니다!

Bluff는 Flutter 위젯에서 영감을 받아 dart로 작성된 정적 웹사이트 생성기입니다.

왜 ?

작은 정적 웹사이트를 작성해야 할 때마다 js 환경으로 전환하는 것이 지겨워서 이 프로젝트를 시작했습니다. 저는 사용자 인터페이스를 개발하는 동일한 방식을 유지하고 패러다임을 계속해서 다시 학습하는 데 시간을 허비하지 않기 위해 가능한 한 Flutter에 가장 가까운 개념을 원했습니다.

웹용 Flutter를 사용하지 않는 이유는 무엇인가요?

나는 좋은 SEO를 갖춘 매우 가벼운 웹사이트를 원했기 때문입니다. 하지만 웹용 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 ),
                  ),
                );
              },
            )
          ],
        )
      ],
    );
  }
}