bluff

ブラフ

免責事項 : これは自分のニーズのために作成したものなので、完全であるとは期待しないでください。これは週末のハックです。使用は自己責任で行ってください。

Bluff は、Flutter ウィジェットからインスピレーションを得た、dart で書かれた静的 Web サイト ジェネレーターです。

なぜ ？

私がこのプロジェクトを始めたのは、小さな静的な Web サイトを作成する必要があるたびに JS 環境に切り替えるのにうんざりしたためです。私は、ユーザー インターフェイスを開発する同じ方法を維持し、パラダイムを何度も学び直す時間を無駄にしないために、コンセプトをできるだけ Flutter に近づけたいと考えました。

Web に Flutter を使用しないのはなぜですか?

優れたSEOを備えた本当に軽量なWebサイトが欲しかったからです。ただし、Web 用 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 ),
                  ),
                );
              },
            )
          ],
        )
      ],
    );
  }
}