Flutter复古界面风格插件flutter95的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter95

Flutter95 is a package that provides Windows95 UI components for Flutter applications. It allows you to create a retro look and feel for your app, reminiscent of the classic Windows 95 operating system.

Screenshots

Screenshot

Components

Scaffold95

Scaffold95 is a Windows95 styled window.

  • Title: Provides a title for the scaffold.
  • Toolbar: Optional toolbar that requires Item95 action items.

If a scaffold canPop (meaning it is not a root of the app), a close button appears.

Scaffold95(
  title: 'Flutter95',
  toolbar: Toolbar95(
    actions: [
      Item95(
        label: 'File', 
        onTap: () {},
      ),
    ],
  ),
  body: Container(),
)

Menu95

Menu95 is a Windows95 styled menu.

  • Items: List of MenuItem95 items.
  • onItemSelected: Callback when an item is selected.

Display using show(context, position) or use it directly with Item95.

Menu95(
  items: [
    MenuItem95(
      value: 1,
      label: 'New',
    ),
    MenuItem95(
      value: 2,
      label: 'Open',
    ),
    MenuItem95(
      value: 3,
      label: 'Exit',
    ),
  ],
  onItemSelected: (item) {},
);

menu.show(
  context,
  Offset(50, 100),
);

Item95(
  label: 'File',
  menu: Menu95(...),
),

Button95

Button95 is a Windows95 styled button.

  • onTap: Callback when the button is tapped.
  • child: Child widget, typically a Text widget.

If onTap is null, the button acts as a disabled button.

Button95(
  onTap: () {},
  child: Text('Button95'),
)

Checkbox95

Checkbox95 is a Windows95 styled checkbox.

  • value: Current value of the checkbox.
  • label: Optional label.
  • onChanged: Callback when the checkbox value changes.

If onChanged is null, the checkbox acts as a disabled checkbox.

Checkbox95(
  value: value,
  label: "Some Label", // optional, if null no label is shown
  onChanged: (value) {}, // optional, if null acts as a disabled checkbox
)

TextField95

TextField95 is a Windows95 styled text field.

  • Uses a Material TextField internally.
TextField95()

Tooltip95

Tooltip95 is a tooltip widget designed in Windows95 style.

  • message: Tooltip message.
  • child: Child widget.
Tooltip95(
  message: 'Hello from Flutter95!',
  child: Text('I have a tooltip for you!'),
)

Divider95

Divider95 is a divider widget designed in Windows95 style.

  • indent: Indentation at the start.
  • endIndent: Indentation at the end.
  • height: Height of the divider.
Divider95()

Elevation95

Elevation95 creates an effect of depth and elevation around widgets.

Elevation95(
  child: Text('Elevated Text')
)

Flutter95.textStyle

A TextStyle ready to use that copies the Windows95 text style.

Text(
  'Text with Flutter95.textStyle',
  style: Flutter95.textStyle,
);

Dialogs

showDialog95 displays a dialog in Windows95 style.

showDialog95(
  context: context,
  title: 'Error',
  message: 'Task failed successfully',
);

Example Code

Here is a complete example demonstrating the use of various Flutter95 components:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter95/flutter95.dart';

void main() {
  runApp(const Flutter95App());
}

class Flutter95App extends StatelessWidget {
  const Flutter95App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      color: Flutter95.background,
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  MainScreen({super.key});

  final ValueNotifier<bool> checkboxValue = ValueNotifier<bool>(false);

  final _divider = const Divider95(
    height: 20,
    endIndent: 8,
    indent: 8,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold95(
      title: 'Flutter95',
      toolbar: Toolbar95(actions: [
        Item95(
          label: 'File',
          menu: _buildMenu(),
        ),
        Item95(
          label: 'Edit',
          onTap: (context) {},
        ),
        const Item95(
          label: 'Save',
        ),
      ]),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4.0),
        child: Elevation95(
          type: Elevation95Type.down,
          child: Column(
            children: <Widget>[
              const SizedBox(height: 4),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Button95(
                    onTap: () {
                      Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => const ScreenThatCanPop(),
                      ));
                    },
                    child: const Text('Button95'),
                  ),
                  const Button95(
                    child: Text('Disabled'),
                  ),
                ],
              ),
              const SizedBox(height: 4),
              ValueListenableBuilder(
                valueListenable: checkboxValue,
                builder: (context, value, child) {
                  return Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Checkbox95(
                        value: value,
                        label: "Enabled",
                        onChanged: (value) {
                          if (kDebugMode) {
                            print(value);
                          }
                          checkboxValue.value = (value);
                        },
                      ),
                      const SizedBox(width: 20),
                      Checkbox95(
                        value: value,
                        label: "Disabled",
                      ),
                    ],
                  );
                },
              ),
              const SizedBox(height: 4),
              const Text(
                'Text with Flutter95.textStyle',
                style: Flutter95.textStyle,
              ),
              _divider,
              const Tooltip95(
                message: 'Hello from Flutter95!',
                child: Text(
                  'Long press on this to see a tooltip',
                  style: Flutter95.textStyle,
                ),
              ),
              _divider,
              Button95(
                onTap: () {
                  showDialog95(
                    context: context,
                    title: 'Error',
                    message: 'Task failed successfully',
                  );
                },
                child: const Text('Show Error'),
              ),
              const SizedBox(height: 4),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 8.0),
                child: TextField95(),
              ),
              const SizedBox(height: 4),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 8.0),
                child: TextField95(
                  height: 150,
                  maxLines: 10,
                  multiline: true,
                ),
              ),
              _buildListView(),
            ],
          ),
        ),
      ),
    );
  }

  Menu95 _buildMenu() {
    return Menu95(
      items: [
        MenuItem95(
          value: 1,
          label: 'New',
        ),
        MenuItem95(
          value: 2,
          label: 'Open',
        ),
        MenuItem95(
          value: 3,
          label: 'Exit',
        ),
      ],
      onItemSelected: (item) {},
    );
  }

  /// Build a ListView wrapping it in [Elevation95] with [Elevation95Type.down].
  /// This will create a "deep" container.
  /// Then wrap each item with [Elevation95Type.up] to create an up effect.
  Padding _buildListView() {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 8.0,
        vertical: 8.0,
      ),
      child: Elevation95(
        type: Elevation95Type.down,
        child: SizedBox(
          height: 150,
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemCount: 100,
            itemBuilder: (context, index) {
              return Elevation95(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Item $index',
                    style: Flutter95.textStyle,
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class ScreenThatCanPop extends StatelessWidget {
  const ScreenThatCanPop({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold95(
      title: 'Screen that can pop',
      body: Container(),
    );
  }
}

This example demonstrates how to use various Flutter95 components to create a retro-themed Flutter application. You can run this code in your Flutter project to see the Windows95 style in action.


更多关于Flutter复古界面风格插件flutter95的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter复古界面风格插件flutter95的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter复古界面风格插件flutter95的使用，下面是一个简单的代码示例，展示了如何在Flutter应用中使用该插件来创建一个具有90年代Windows风格的用户界面。

首先，确保你已经在pubspec.yaml文件中添加了flutter95依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter95: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来获取依赖。

接下来，是一个简单的Flutter应用示例，展示如何使用flutter95插件：

import 'package:flutter/material.dart';
import 'package:flutter95/flutter95.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flutter95Theme(
      data: Flutter95ThemeData(
        // 你可以在这里自定义主题，比如颜色、字体等
      ),
      child: MaterialApp(
        title: 'Flutter95 Demo',
        theme: ThemeData(
          // Material主题设置，这里可以保持默认或根据需要进行调整
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Flutter95AppBar(
        title: Text('Flutter95 Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Flutter95Button(
              label: 'Click Me',
              onPressed: () {
                // 按钮点击事件处理
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button Clicked!')),
                );
              },
            ),
            SizedBox(height: 20),
            Flutter95TextField(
              label: 'Type something...',
              onChanged: (value) {
                // 文本变化事件处理
                print('TextField value: $value');
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用了Flutter95Theme来包裹整个应用，以便应用复古的Windows 95风格。我们使用了Flutter95AppBar来创建应用栏，Flutter95Button来创建按钮，以及Flutter95TextField来创建文本输入框。

请注意，flutter95插件的具体API可能会有所不同，因此请查阅最新的官方文档或插件的源代码以获取最准确的信息。此外，由于该插件可能还在积极开发中，因此一些组件和功能可能会有所变化。

这个示例应该能够帮助你快速上手flutter95插件，并创建一个简单的复古风格界面。如果你需要更复杂的界面或功能，可以查阅插件的文档或示例代码进行进一步的探索。

回到顶部