feat/split-components-and-layouts #65
@ -16,8 +16,7 @@
|
|||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
# Flutter - Wyatt Ui Components
|
||||||
# Flutter - Wyatt Wyatt Ui Components
|
|
||||||
|
|
||||||
<p align="left">
|
<p align="left">
|
||||||
<a href="https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/wyatt_analysis">
|
<a href="https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages/src/branch/master/packages/wyatt_analysis">
|
||||||
@ -28,16 +27,87 @@
|
|||||||
|
|
||||||
Wyatt Ui Components for Flutter.
|
Wyatt Ui Components for Flutter.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
<!-- TODO -->
|
|
||||||
|
|
||||||
## Getting started
|
|
||||||
|
|
||||||
<!-- TODO -->
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
<!-- TODO -->
|
### Configuration
|
||||||
|
|
||||||
|
First create all your custom components in `core/design_system/components/`folder. For exemple :
|
||||||
|
|
||||||
|
├── design_system
|
||||||
|
│ ├── components
|
||||||
|
│ │ ├── custom_app_bar.dart
|
||||||
|
│ │ ├── custom_bottom_navigation_bar.dart
|
||||||
|
│ │ └── ...
|
||||||
|
│ └── ...
|
||||||
|
└── ...
|
||||||
|
|
||||||
|
You have to override `confgure` method.
|
||||||
|
|
||||||
|
Then create AppComponentTheme class in `core/design_system/` folder and add all your components. For Example :
|
||||||
|
|
||||||
|
```dart
|
||||||
|
class AppThemeComponent {
|
||||||
|
static ComponentThemeData get components => ComponentThemeData.raw(
|
||||||
|
appBar: const CustomAppBar(),
|
||||||
|
bottomNavigationBar: CustomBottomNavigationBar(
|
||||||
|
onTap: (context, index) {
|
||||||
|
print('$index');
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Provider
|
||||||
|
|
||||||
|
In you main file, before calling router, call `ComponentTheme` widget and give your app as child. For example :
|
||||||
|
|
||||||
|
```dart
|
||||||
|
void main() {
|
||||||
|
runApp(const MyApp());
|
||||||
|
}
|
||||||
|
|
||||||
|
class MyApp extends StatelessWidget {
|
||||||
|
const MyApp({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => ComponentTheme(
|
||||||
|
themDataWidget: AppThemeComponent.components,
|
||||||
|
child: MaterialApp(
|
||||||
|
title: 'Wyatt Ui Layout Example',
|
||||||
|
theme: ThemeData(
|
||||||
|
primarySwatch: Colors.blue,
|
||||||
|
),
|
||||||
|
home: const ..,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Call
|
||||||
|
|
||||||
|
Then you're ready to call all your components from everywhere in your app using :
|
||||||
|
|
||||||
|
```dart
|
||||||
|
context.components,
|
||||||
|
```
|
||||||
|
|
||||||
|
For example :
|
||||||
|
|
||||||
|
```dart
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => Scaffold(
|
||||||
|
appBar: context.components.appBar,
|
||||||
|
body: ...
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
If you need specific settings, or pass parameters to your component, call `configure` method. It will use default paramters you've passed in your app comppnent theme file, and update the parameter you need to change. For example :
|
||||||
|
|
||||||
|
```dart
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => Scaffold(
|
||||||
|
appBar: context.components.appBar.configure({title:'New Title !}),
|
||||||
|
body: ...
|
||||||
|
)
|
||||||
|
```
|
||||||
|
@ -25,96 +25,10 @@
|
|||||||
<img src="https://img.shields.io/badge/SDK-Flutter-blue?style=flat-square" alt="SDK: Flutter" />
|
<img src="https://img.shields.io/badge/SDK-Flutter-blue?style=flat-square" alt="SDK: Flutter" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
Wyatt Ui Layout for Flutter.
|
Wyatt Ui Layout for Flutter
|
||||||
|
|
||||||
## Features
|
## Features.
|
||||||
|
|
||||||
- Component Theme
|
|
||||||
- Layouts :
|
- Layouts :
|
||||||
- App Bar Layout
|
- App Bar Layout
|
||||||
- Bottom Navigation Bar Layout
|
- Bottom Navigation Bar Layout
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Configuration
|
|
||||||
|
|
||||||
First create all your custom components in `core/design_system/components/`folder. For exemple :
|
|
||||||
|
|
||||||
├── design_system
|
|
||||||
│ ├── components
|
|
||||||
│ │ ├── custom_app_bar.dart
|
|
||||||
│ │ ├── custom_bottom_navigation_bar.dart
|
|
||||||
│ │ └── ...
|
|
||||||
│ └── ...
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
You have to override `confgure` method.
|
|
||||||
|
|
||||||
Then create AppComponentTheme class in `core/design_system/` folder and add all your components. For Example :
|
|
||||||
|
|
||||||
```dart
|
|
||||||
class AppThemeComponent {
|
|
||||||
static ComponentThemeData get components => ComponentThemeData.raw(
|
|
||||||
appBar: const CustomAppBar(),
|
|
||||||
bottomNavigationBar: CustomBottomNavigationBar(
|
|
||||||
onTap: (context, index) {
|
|
||||||
print('$index');
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Provider
|
|
||||||
|
|
||||||
In you main file, before calling router, call `ComponentTheme` widget and give your app as child. For example :
|
|
||||||
|
|
||||||
```dart
|
|
||||||
void main() {
|
|
||||||
runApp(const MyApp());
|
|
||||||
}
|
|
||||||
|
|
||||||
class MyApp extends StatelessWidget {
|
|
||||||
const MyApp({super.key});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) => ComponentTheme(
|
|
||||||
themDataWidget: AppThemeComponent.components,
|
|
||||||
child: MaterialApp(
|
|
||||||
title: 'Wyatt Ui Layout Example',
|
|
||||||
theme: ThemeData(
|
|
||||||
primarySwatch: Colors.blue,
|
|
||||||
),
|
|
||||||
home: const ..,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Call
|
|
||||||
|
|
||||||
Then you're ready to call all your components from everywhere in your app using :
|
|
||||||
|
|
||||||
```dart
|
|
||||||
context.components,
|
|
||||||
```
|
|
||||||
|
|
||||||
For example :
|
|
||||||
|
|
||||||
```dart
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) => Scaffold(
|
|
||||||
appBar: context.components.appBar,
|
|
||||||
body: ...
|
|
||||||
)
|
|
||||||
```
|
|
||||||
|
|
||||||
If you need specific settings, or pass parameters to your component, call `configure` method. It will use default paramters you've passed in your app comppnent theme file, and update the parameter you need to change. For example :
|
|
||||||
|
|
||||||
```dart
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) => Scaffold(
|
|
||||||
appBar: context.components.appBar.configure({title:'New Title !}),
|
|
||||||
body: ...
|
|
||||||
)
|
|
||||||
```
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user