https://github.com/piotrfleury/micro-elements
This project is a Proof Of Concept of micro front end with Flutter part
https://github.com/piotrfleury/micro-elements
flutter microfrontends web
Last synced: 6 days ago
JSON representation
This project is a Proof Of Concept of micro front end with Flutter part
- Host: GitHub
- URL: https://github.com/piotrfleury/micro-elements
- Owner: PiotrFLEURY
- License: bsd-3-clause
- Created: 2022-12-04T18:44:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-04T18:51:39.000Z (over 3 years ago)
- Last Synced: 2025-09-13T07:31:36.657Z (10 months ago)
- Topics: flutter, microfrontends, web
- Language: C++
- Homepage:
- Size: 332 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# micro frond end with Flutter
This project is a Proof Of Concept of micro front end with Flutter part
## Getting Started
First run the Flutter bottom_bar app on web in release mode
```bash
cd bottom_bar
flutter run -d chrome --release --web-port=3000
```
Then start a live-server in the root folder
```bash
live-server
```
## How it works
This project uses custom HTML element definitions.
### Base layer
A first abstraction layer is defined in `micro/micro-element.js`
### Define custom element
To define a new micro element, you need to extend the `MicroElement`.
```js
class MicroBottomBar extends MicroElement {
content = (attributes) => {
let { width, height } = attributes;
return `
#app-container {
height: ${height};
width: ${width};
margin: 0 auto;
border: none;
referer-policy: same-origin;
}
`;
}
microAttributes = [ 'width', 'height' ];
}
defineElement('micro-bottom-bar', MicroBottomBar);
```
### Use custom element
```html
```
### Communication between micro elements
__TODO - This part has not been yet etablished.__
> Requirements:
> - Being able to listen events from a micro element
> - Being able to send events to a micro element