Flutter95

repository·master·Indexed 42 days ago

https://github.com/miquelbeltran/flutter95

A library of UI components for Flutter applications designed with a Windows 95 aesthetic. It provides themed widgets including Scaffold95, Button95, Menu95, Checkbox95, TextField95, and Divider95, along with utility functions like showDialog95 and showMenu95 to recreate the classic 3D bevel effect and typography of Windows 95.

Tokens
5.2K
Snippets
25
Records
28
Agent score
52%

What's inside Flutter95

  1. Customize the iOS launch screen assets

    master

    To change the launch screen image for the iOS version of your Flutter application, you can use one of two methods:

    Method 1: Direct File Replacement

    Replace the existing image files located in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets. Ensure the new files follow the expected naming and resolution requirements for iOS launch images.

    Method 2: Using Xcode

    1. Open your Flutter project's iOS workspace by running: open ios/Runner.xcworkspace.
    2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
    3. Drag and drop your desired images directly into the asset catalog to replace the current launch images.
    open ios/Runner.xcworkspace
  2. Implement Menu95 menus

    master

    The Menu95 widget provides a Windows95 styled menu. It can be used in two ways:

    1. Manual Display: Use the show(context, position) method to display the menu at a specific Offset.
    2. Automatic Positioning: Attach a Menu95 directly to an Item95 widget via the menu property, and it will be positioned automatically when the item is interacted with.

    Menu95 uses MenuItem95 objects to define its entries.

    // Manual display
    Menu95(
      items: [
        MenuItem95(value: 1, label: 'New'),
        MenuItem95(value: 2, label: 'Open'),
      ],
      onItemSelected: (item) {},
    ).show(context, Offset(50, 100));
    
    // Automatic positioning with Item95
    Item95(
      label: 'File',
      menu: Menu95(
        items: [
          MenuItem95(value: 1, label: 'New'),
        ],
        onItemSelected: (item) {},
      ),
    ),
  3. Apply Windows95 styling with Elevation95 and Flutter95.textStyle

    master

    Elevation95

    Wrap widgets with Elevation95 to create a Windows95-style effect of depth and elevation.

    Flutter95.textStyle

    Use Flutter95.textStyle to apply the standard Windows95 text style to any Text widget.

    Elevation95(
      child: Text('Elevated Text')
    )
    
    Text(
      'Text with Flutter95.textStyle',
      style: Flutter95.textStyle,
    );
  4. Use Scaffold95 for Windows95 styled windows

    master

    The Scaffold95 widget provides a Windows95 styled window container. It includes a title and an optional toolbar. If the scaffold is not the root of the app (i.e., canPop is true), a close button is automatically displayed.

    You can customize the header by providing a WindowHeader95 to the customHeader property.

    Scaffold95(
      title: 'Flutter95',
      toolbar: Toolbar95(
        actions: [
          Item95(
            label: 'File', 
            onTap: () {},
          ),
        ],
      ),
      body: Container(),
    )
  5. Use TextField95, Tooltip95, and Divider95

    master

    TextField95

    A text field styled as a Windows95 input. It uses a Material TextField internally.

    Tooltip95

    A tooltip widget designed in Windows95 style. It functions identically to the Material Tooltip widget.

    Divider95

    A divider widget designed in Windows95 style. It supports indent, endIndent, and height properties, similar to the Material Divider.

    TextField95()
    
    Tooltip95(
        message: 'Hello from Flutter95!',
        child: Text('I have a tooltip for you!'),
    )
    
    Divider95()
  6. Use Button95 and Checkbox95

    master

    Button95

    A Windows95 styled button. It provides default text styles and padding for its children. If onTap is set to null, the button renders in a disabled state.

    Checkbox95

    A Windows95 styled checkbox. You can provide an optional label. If onChanged is set to null, the checkbox renders in a disabled state.

    // Button95
    Button95(
      onTap: () {},
      child: Text('Button95'),
    )
    
    // Checkbox95
    Checkbox95(
        value: value,
        label: "Some Label",
        onChanged: (value) {},
    )
  7. Use Toolbar95 to create a Windows95 styled toolbar

    master

    The Toolbar95 widget provides a container for Windows95-style toolbar actions. It accepts a list of Item95 widgets and arranges them in a Row with specific padding (horizontal: 4.0, vertical: 2.0).

    Toolbar95(
      actions: [
        Item95(label: 'New'),
        Item95(label: 'Open'),
      ],
    )
  8. Customize the window header with WindowHeader95

    master

    The WindowHeader95 widget is the component responsible for the top bar of a window. It uses the Flutter95.headerTextStyle for its title and a gradient background.

    Usage Options:

    • Title: Provide a title string to display in the header.
    • Close Button Control:
      • Use forceCloseButton (bool?) to explicitly show (true) or hide (false) the close button.
      • If null, the button visibility depends on whether the Navigator can pop and if an onClosePressed callback is provided.
    • Custom Content: If you provide a child widget, it will be displayed instead of the default title and close button layout.
    • Custom Action: Provide onClosePressed to define what happens when the close button is tapped.
    WindowHeader95(
      title: 'Custom Header',
      forceCloseButton: true,
      onClosePressed: (context) => print('Closed'),
    );
  9. Use Flutter95 text styles

    master

    The Flutter95 class exports several TextStyle constants to maintain consistent typography across headers, body text, and disabled states.

    • headerTextStyle: Bold, 16pt, white text (intended for headers).
    • textStyle: Normal, 14pt, black text (standard body text).
    • disabledTextStyle: Normal, 14pt, gray text with a subtle shadow (for disabled elements).
    Text(
      'Window Title',
      style: Flutter95.headerTextStyle,
    )
  10. Create a Windows95 styled menu with showMenu95

    master

    Use the showMenu95 function to display a popup menu that follows the Windows95 aesthetic. It accepts a BuildContext, a RelativeRect for positioning, and a list of MenuItem95 objects. The menu uses Flutter95.textStyle and specific border colors from the Flutter95 theme to maintain visual consistency.

    await showMenu95<String>(
      context,
      position,
      [ 
        MenuItem95(value: 'option1', label: 'Option 1'),
        MenuItem95(value: 'option2', label: 'Option 2'),
      ],
    );
  11. Use the Divider95 component

    master

    The Divider95 widget provides a Windows 95 styled horizontal divider. It uses the Flutter95.pressedDecorationOutside decoration to maintain visual consistency with the rest of the theme. You can control the vertical thickness via height (the total space occupied) and the horizontal spacing using indent and endIndent.

    Divider95(
      height: 16.0,
      indent: 10.0,
      endIndent: 10.0,
    )