ix_flutter

A comprehensive Flutter component library based on the Siemens iX Design System.

⚠️ Important Disclaimer: This is an independent, community-maintained adaptation of the Siemens iX Design System for Flutter. It is NOT developed, maintained, or endorsed by Siemens AG. See LICENSE, ICON_LICENSING.md, and THIRD_PARTY_NOTICES.md for complete legal information.

Screenshots

IX Flutter Demo - Dark Theme

IX Flutter demo application showcasing components in dark theme

Overview

ix_flutter provides Flutter widgets and components that implement the Siemens iX Design System, enabling developers to build consistent, professional applications that follow Siemens design guidelines.

This package brings the design patterns, components, and visual language from Siemens iX to Flutter applications.

Features

🎨 Siemens iX Theme System - Complete theming support with light/dark modes
🧩 UI Components - Pre-built widgets following iX design patterns
🎯 1400+ Icons - Access to the complete Siemens iX icon library
📱 Responsive Design - Components adapt to different screen sizes
♿ Accessibility - Built with accessibility in mind

Important: Using Siemens iX Icons

⚠️ Due to licensing and distribution restrictions, icon SVG files are NOT included in this library package.

To use Siemens iX icons, you MUST run the icon generator tool to download icons from the official Siemens source.

Quick Icon Setup

Add the library to your pubspec.yaml:

dev_dependencies:
  ix_flutter: ^1.0.0

Get dependencies:

flutter pub get

Generate icons:

dart run ix_flutter:generate_icons

Use icons in your code:

import 'package:your_app/ix_icons.dart';

Widget build(BuildContext context) {
  return IxIcons.home;
}

See doc/ix_icons.md for complete icon documentation.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  ix_flutter: ^1.0.0

Then run:

flutter pub get

Getting Started

1. Wrap Your App with IxTheme

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Siemens iX Demo',
      theme: IxTheme.lightTheme,
      darkTheme: IxTheme.darkTheme,
      themeMode: ThemeMode.system,
      home: const HomeScreen(),
    );
  }
}

2. Use iX Components

import 'package:ix_flutter/ix_flutter.dart';
import 'package:your_app/ix_icons.dart';  // Generated icons

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        leading: IxIcons.menu,
      ),
      body: Column(
        children: [
          IxButton.primary(
            onPressed: () {},
            child: Text('Primary Action'),
          ),
          IxButton.secondary(
            onPressed: () {},
            child: Text('Secondary Action'),
          ),
        ],
      ),
    );
  }
}

Available Components

Buttons: Primary, secondary, ghost, icon buttons
Application Scaffold: Complete app structure with navigation
Dropdown: Dropdown buttons and menus
Empty State: Placeholder components for empty data
Toast Notifications: Temporary notifications and alerts
Blind/Drawer: Sliding panels and drawers
Responsive Data View: Responsive tables and data grids
Theme System: Complete theming with color tokens

Documentation

Icons Documentation - Complete guide for using Siemens iX icons
Application Scaffold - App structure and navigation
Blind/Drawer - Sliding panel documentation
Breadcrumb - Hierarchical navigation breadcrumb
Dropdown Button - Dropdown component guide
Empty State - Empty state placeholder docs
Responsive Data View - Data table documentation
Spinner - Animated loading spinner component
Toast - Notification system docs
Colors - Color token reference

Example

Check out the example directory for a complete working application demonstrating all components.

To run the example:

cd example
flutter pub get

# Generate icons (required first time)
dart run ix_flutter:generate_icons

flutter run

Icon Generator Tool

The icon generator is integrated with this package and downloads Siemens iX icons from the official source.

Why Generator is Required

Due to licensing and distribution restrictions on Siemens iX Design System icons, SVG files cannot be bundled in the library. The generator ensures:

✅ Legal compliance with Siemens licensing
✅ Icons are from the official @siemens/ix-icons source
✅ Latest icon versions available
✅ Proper attribution and licensing

Generator Usage

# Basic usage
dart run ix_flutter:generate_icons

# Custom paths
dart run ix_flutter:generate_icons \
  --output lib/generated \
  --assets assets/icons

# For library packages
dart run ix_flutter:generate_icons \
  --package my_library_name

# Show help
dart run ix_flutter:generate_icons --help

See tool/README.md for complete generator documentation.

Platform Support

Platform	Supported
Android	✅
iOS	✅
Web	✅
macOS	✅
Windows	✅
Linux	✅

Requirements

Flutter SDK: >=3.10.0
Dart SDK: >=3.10.0

License

This package is licensed under the MIT License. See LICENSE file for details.

Important Legal Notice

Trademark and Attribution

Siemens iX Design System is owned and maintained by Siemens AG
This package is an independent community adaptation, not an official Siemens product
Not developed, maintained, or endorsed by Siemens
Siemens® and Siemens iX™ are trademarks of Siemens AG

For official Siemens iX resources, visit: https://ix.siemens.io

Icon Licensing

The Siemens iX icons are subject to Siemens' licensing terms. This library does NOT include the icon files due to distribution restrictions. Users must:

Download icons using the provided generator tool
Icons are sourced from the official @siemens/ix-icons npm package
Ensure compliance with Siemens iX Design System licensing terms

By using the icon generator, you agree to comply with Siemens iX Design System licensing terms.

Icon Licensing Details

See ICON_LICENSING.md for complete licensing information.

Documentation

Complete documentation is available in the doc/ folder:

Icon Integration Guide - Complete guide to using Siemens iX icons
Application Scaffold - Main application container component
Blind/Drawer - Sliding panel component
Dropdown Button - Dropdown selection component
Empty State - Empty state placeholder component
Responsive Data View - Responsive data table component
Toast Notifications - Notification system component
Color Tokens - Color system reference

Quick Start Example

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ix_flutter Demo',
      theme: IxTheme.lightTheme,
      darkTheme: IxTheme.darkTheme,
      themeMode: ThemeMode.system,
      home: Scaffold(
        appBar: AppBar(title: const Text('ix_flutter Components')),
        body: const Center(
          child: Text('Build beautiful apps with ix_flutter'),
        ),
      ),
    );
  }
}

Available Components

IxApplicationScaffold - Main application shell with sidebar navigation
IxBreadcrumb - Navigation breadcrumb component
IxBlind - Sliding drawer/panel component
IxDropdownButton - Advanced dropdown selection
IxEmptyState - Empty state with icon and message
IxResponsiveDataView - Responsive data table/list
IxToast - Toast notification system
IxPaginationBar - Pagination controls
And many more...

See example/ folder for complete working examples.

Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Setup

# Clone repository
git clone https://github.com/SobSoft-s-r-o/ix_flutter.git
cd ix_flutter

# Install dependencies
flutter pub get

# Run tests
flutter test

# Generate icons for development
dart run ix_flutter:generate_icons

# Run example app
cd example
flutter run

Resources

Official Siemens iX Design System

Website: https://ix.siemens.io
Documentation: https://ix.siemens.io/docs/
Icon Library: https://ix.siemens.io/docs/icon-library/
Design Guidelines: https://ix.siemens.io/docs/guidelines/

This Package

Icon Licensing: See ICON_LICENSING.md
License: See LICENSE
Example App: See example/ folder

Changelog

See CHANGELOG.md for version history and updates.

Support

Documentation: Check doc/ folder for detailed component guides
Issues: Report a bug
Discussions: Ask a question
Maintainer: SobSoft (https://sobsoft.sk)

Sponsorship

Support the development of this package! ❤️

Your sponsorship helps maintain and improve ix_flutter. Become a sponsor or use the Sponsor button at the top of the repository.

Commercial Support

For paid support, consulting, or custom development services, contact SobSoft:

📧 Contact Form

We offer professional services including:

Custom component development
Migration assistance
Integration support
Training and consulting

License

This package is licensed under the MIT License. See LICENSE for details.

Important: Icons and design patterns are subject to separate licensing terms. See ICON_LICENSING.md for details.

Community Project Notice: This package is maintained by the community and is not affiliated with Siemens. For official Siemens iX resources, visit https://ix.siemens.io

Version: 1.0.0 | Dart: >=3.10.0 | Flutter: >=3.10.0

Disclaimer: This is not an official Siemens product. This library is developed independently and provides Flutter implementations of Siemens iX Design System patterns. Always ensure compliance with Siemens licensing terms when using iX design assets.

ix_flutter

Screenshots

Overview

Features

Important: Using Siemens iX Icons

Quick Icon Setup

Installation

Getting Started

1. Wrap Your App with IxTheme

2. Use iX Components

Available Components

Documentation

Example

Icon Generator Tool

Why Generator is Required

Generator Usage

Platform Support

Requirements

License

Important Legal Notice

Trademark and Attribution

Icon Licensing

Icon Licensing Details

Documentation

Quick Start Example

Available Components

Contributing

Development Setup

Resources

Official Siemens iX Design System

This Package

Changelog

Support

Sponsorship

Commercial Support

License

Libraries

ix_flutter package