configura_tiles

Description:

configura tiles

ConfiguraTiles Documentation #
Welcome to the ConfiguraTiles documentation! This package provides a configurable tile system for your Flutter applications. It supports various features including custom app bars, floating action buttons (FAB), and debug modes.

Table of Contents #

ConfiguraTiles Documentation

Table of Contents
Installation
Usage
Tile Configuration
App Bar Configuration
Floating Action Button Configuration
Debug Modes
Project Links and Social Media

Project Links
Social Media





Installation #
Add the following to your pubspec.yaml:
dependencies:
configura_tiles: latest_version
copied to clipboard
Run flutter pub get to install the package.
Usage #
To get started with ConfiguraTiles, you need to use the ConfiguraTileForge widget. Here's a basic example:
import 'package:flutter/material.dart';
import 'package:configura_tiles/configura_tiles.dart';
import 'appbar/appbar_demo.dart';
import 'theme/theme_demo.dart';
import 'tile_header/tile_header.dart';
import 'visibility/visibility_demo.dart';

class TilesDemo extends StatefulWidget {
const TilesDemo({Key? key}) : super(key: key);

@override
State<TilesDemo> createState() => _TilesDemoState();
}

class _TilesDemoState extends State<TilesDemo> {
@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
appBarConfig: ConfiguraAppBar(
enabled: true,
title: 'ConfiguraTile Demo',
titleColor: Colors.white,
backgroundColor: Colors.black,
leadingIcon: Icons.menu,
leadingColor: Colors.white,
onLeadingTap: () {
// Add logic for leading icon tap
},
trailingIconEnabled: true,
trailingIcon: Icons.help,
trailingIconColor: Colors.white,
onTrailingTap: () {
// Add logic for trailing icon tap
},
),
tiles: [
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.visibility, color: Colors.white),
title: 'Visibility demo',
subtitle: 'Turn tile on/off',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const VisibilityDemo(),
),
);
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
visibilityEnabled: false,
visibilityCondition: () => true,
),
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.text_fields, color: Colors.white),
title: 'Header-text demo',
subtitle: 'View header text',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TileHeaderDemo(),
),
);
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,

//headerText: 'Header Text',
headerTextColor: Colors.black,
headerSpacing: 10.0,
textAlignment: CrossAxisAlignment.start,
visibilityEnabled: false,
visibilityCondition: () => true,
),
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.settings, color: Colors.white),
title: 'Appbar demo',
subtitle: 'Toggle appbar configs',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AppbarDemo(),
),
);
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,

visibilityEnabled: false,
visibilityCondition: () => true,
),
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.dark_mode, color: Colors.white),
title: 'Tile-theme demo',
subtitle: 'Tile theme change demo',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ThemeDemo(),
),
);
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,

visibilityEnabled: false,
visibilityCondition: () => true,
),
],
debugMode: DebugMode.userFriendly,
customErrorMessage: 'Oops! Something went wrong.',
fabConfig: ConfiguraFab(
visibility: true,
color: Colors.black,
icon: Icons.home,
iconColor: Colors.white,
onFabTap: () {
// Add logic for FAB tap
},
snackbarColor: Colors.red,
snackbarTextColor: Colors.white,
),
);
}
}

copied to clipboard


Tile Configuration #
ConfiguraTiles allows for extensive customization of tiles. Below is an example demonstrating various tile properties:

Tile Visibility Demo

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

class VisibilityDemo extends StatefulWidget {
const VisibilityDemo({Key? key}) : super(key: key);

@override
State<VisibilityDemo> createState() => _VisibilityDemoState();
}

class _VisibilityDemoState extends State<VisibilityDemo> {
bool isTileVisible = true;

@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
appBarConfig: ConfiguraAppBar(
enabled: true,
title: 'Visibility Demo',
titleColor: Colors.white,
backgroundColor: Colors.black,
leadingIcon: Icons.arrow_back,
leadingColor: Colors.white,
onLeadingTap: () {
Navigator.pop(context);
},
),
tiles: [
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.visibility, color: Colors.white),
title: 'Now you see me',
subtitle: 'Now you don\'t',
onTap: () {},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
visibilityEnabled: true,
visibilityCondition: () => isTileVisible,
),
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.visibility_off, color: Colors.white),
title: 'Disappear',
subtitle: 'Make it disappear',
onTap: () {
setState(() {
isTileVisible = false;
});
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
),
ConfiguraTile(
tileColor: const Color.fromARGB(255, 156, 115, 115),
leading: const Icon(Icons.remove_red_eye, color: Colors.white),
title: 'Reappear',
subtitle: 'Make it reappear',
onTap: () {
setState(() {
isTileVisible = true;
});
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
),
],
debugMode: DebugMode.userFriendly,
customErrorMessage: 'Oops! Something went wrong.',
fabConfig: ConfiguraFab(
visibility: false,
color: Colors.black,
icon: Icons.arrow_back,
iconColor: Colors.white,
onFabTap: () {
Navigator.pop(context);
},
snackbarColor: Colors.red,
snackbarTextColor: Colors.white,
),
);
}
}

copied to clipboard



Tile with header text

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

class TileHeaderDemo extends StatefulWidget {
const TileHeaderDemo({Key? key}) : super(key: key);

@override
State<TileHeaderDemo> createState() => _TileHeaderDemoState();
}

class _TileHeaderDemoState extends State<TileHeaderDemo> {
@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
appBarConfig: ConfiguraAppBar(
enabled: true,
title: 'Tile Header Demo',
titleColor: Colors.white,
backgroundColor: Colors.black,
leadingIcon: Icons.arrow_back,
leadingColor: Colors.white,
onLeadingTap: () {
Navigator.pop(context);
},
),
tiles: [
ConfiguraTile(
headerText: 'Header inside example',
textAlignment: CrossAxisAlignment.start,
headerSpacing: 10.0,
tileColor: Colors.black,
leading: const Icon(Icons.text_fields, color: Colors.white),
title: 'Header Inside demo',
subtitle: 'Example of header text inside',
onTap: () {},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
headerTextColor: Colors.white, // Set the header text color
headerPositionOutside: false, // Position header inside
visibilityCondition: () => true, // Optional condition
),
ConfiguraTile(
headerText: 'Header example outside',
textAlignment: CrossAxisAlignment.start,
headerSpacing: 10.0,
tileColor: Colors.black,
leading: const Icon(Icons.text_fields, color: Colors.white),
title: 'Header example outside',
subtitle: 'Example of header text outside',
onTap: () {},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
headerTextColor: Colors.black, // Set the header text color
headerPositionOutside: true, // Position header outside
visibilityCondition: () => true, // Optional condition
),
],
debugMode: DebugMode.userFriendly,
customErrorMessage: 'Oops! Something went wrong.',
fabConfig: ConfiguraFab(
visibility: false,
),
);
}
}

copied to clipboard


Tile-theme demo

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

class ThemeDemo extends StatefulWidget {
const ThemeDemo({Key? key}) : super(key: key);

@override
State<ThemeDemo> createState() => _ThemeDemoState();
}

class _ThemeDemoState extends State<ThemeDemo> {
bool _isDarkMode = false;

void _toggleTheme(bool isDark) {
setState(() {
_isDarkMode = isDark;
});
}

@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
appBarConfig: ConfiguraAppBar(
enabled: true,
title: 'Theme Demo',
titleColor: _isDarkMode ? Colors.white : Colors.black,
backgroundColor: _isDarkMode ? Colors.black : Colors.white,
leadingIcon: Icons.arrow_back,
leadingColor: _isDarkMode ? Colors.white : Colors.black,
onLeadingTap: () {
Navigator.pop(context);
},
),
tiles: [
ConfiguraTile(
tileColor: _isDarkMode ? Colors.black : Colors.white,
leading: const Icon(Icons.brightness_6, color: Colors.white),
title: 'Focus on me',
subtitle: 'To see if I change color',
onTap: () {},
iconColor: _isDarkMode ? Colors.white : Colors.black,
titleColor: _isDarkMode ? Colors.white : Colors.black,
subtitleColor: _isDarkMode ? Colors.grey[300] : Colors.grey[700],
visibilityEnabled: true,
visibilityCondition: () => true, // Optional condition
themeEnabled: true,
tileColorDark: Colors.black,
titleColorDark: Colors.white,
subtitleColorDark: Colors.grey[300],
),
ConfiguraTile(
tileColor: Colors.white,
leading: const Icon(Icons.wb_sunny),
title: 'Light Theme',
subtitle: 'Switch to light theme',
onTap: () {
_toggleTheme(false);
},
iconColor: Colors.black,
titleColor: Colors.black,
subtitleColor: const Color.fromARGB(255, 68, 68, 68),
),
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(Icons.nights_stay, color: Colors.white),
title: 'Dark Theme',
subtitle: 'Switch to dark theme',
onTap: () {
_toggleTheme(true);
},
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.grey[300],
),
],
debugMode: DebugMode.userFriendly,
customErrorMessage: 'Oops! Something went wrong.',
fabConfig: ConfiguraFab(
visibility: false,
),
);
}
}

copied to clipboard



App Bar Configuration #
You can customize the app bar using the ConfiguraAppBar class. Here's are examples of some usages:

App Bar

ConfiguraAppBar(
enabled: _appBarEnabled,
title: 'App Bar Demo',
titleColor: Colors.white,
backgroundColor: Colors.black,
leadingIcon: _implyLeading ? Icons.menu : null,
leadingColor: Colors.white,
onLeadingTap:
_implyLeading ? () => _showCustomFunctionality(context) : null,
trailingIcon: _trailingEnabled ? Icons.more_vert : null,
trailingIconColor: Colors.white,
trailingIconEnabled: _trailingEnabled,
onTrailingTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.black,
title: const Text(
'Test Successful',
style: TextStyle(color: Colors.white),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'Close',
style: TextStyle(color: Colors.white),
),
),
],
);
},
);
},
),
copied to clipboard


Toggle App bar Demo

ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(
Icons.app_registration,
),
title: 'Toggle App Bar',
subtitle: _appBarEnabled ? 'Enabled' : 'Disabled',
onTap: _toggleAppBar,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
copied to clipboard



Toggle leading icon example

ConfiguraTile(
tileColor: Colors.black,
leading: Icon(
_implyLeading ? Icons.visibility : Icons.visibility_off,
color: Colors.white,
),
title: 'Toggle Leading',
subtitle: _implyLeading ? 'On' : 'Off',
onTap: _toggleImplyLeading,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
copied to clipboard


Toggle trailing icon example

ConfiguraTile(
tileColor: Colors.black,
leading: Icon(
_trailingEnabled ? Icons.more_vert : Icons.close,
color: Colors.white,
),
title: 'Toggle Trailing',
subtitle: _trailingEnabled ? 'On' : 'Off',
onTap: _toggleTrailing,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
copied to clipboard

https://private-user-images.githubusercontent.com/172279696/340447050-96f1f4af-4fcf-4812-bb6b-a915053ae8d0.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg2NTg4NDksIm5iZiI6MTcxODY1ODU0OSwicGF0aCI6Ii8xNzIyNzk2OTYvMzQwNDQ3MDUwLTk2ZjFmNGFmLTRmY2YtNDgxMi1iYjZiLWE5MTUwNTNhZThkMC5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYxN1QyMTA5MDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YmVlOWJkYTE1NGNjMTg2NjQxYTM5MDZkOWIxNjcwYTdlZWZjMGY4MDI3ZTM1YzNhYjY0OWY1YmJkMjVlNzJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.fvrI6i_tmiFYWY3OZeH7Ad-_GnEnMUrqW_65B2bkMVI


Complete App bar example

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

class AppbarDemo extends StatefulWidget {
const AppbarDemo({Key? key}) : super(key: key);

@override
State<AppbarDemo> createState() => _AppbarDemoState();
}

class _AppbarDemoState extends State<AppbarDemo> {
bool _appBarEnabled = true;
bool _implyLeading = true;
bool _trailingEnabled = true;

void _toggleAppBar() {
setState(() {
_appBarEnabled = !_appBarEnabled;
});
}

void _toggleImplyLeading() {
setState(() {
_implyLeading = !_implyLeading;
});
}

void _toggleTrailing() {
setState(() {
_trailingEnabled = !_trailingEnabled;
});
}

void _showCustomFunctionality(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.black,
title: const Text(
'Custom Functionality',
style: TextStyle(color: Colors.white),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'Close',
style: TextStyle(color: Colors.white),
),
),
],
);
},
);
}

@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
appBarConfig: ConfiguraAppBar(
enabled: _appBarEnabled,
title: 'App Bar Demo',
titleColor: Colors.white,
backgroundColor: Colors.black,
leadingIcon: _implyLeading ? Icons.menu : null,
leadingColor: Colors.white,
onLeadingTap:
_implyLeading ? () => _showCustomFunctionality(context) : null,
trailingIcon: _trailingEnabled ? Icons.more_vert : null,
trailingIconColor: Colors.white,
trailingIconEnabled: _trailingEnabled,
onTrailingTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.black,
title: const Text(
'Test Successful',
style: TextStyle(color: Colors.white),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'Close',
style: TextStyle(color: Colors.white),
),
),
],
);
},
);
},
),
tiles: [
ConfiguraTile(
tileColor: Colors.black,
leading: const Icon(
Icons.app_registration,
),
title: 'Toggle App Bar',
subtitle: _appBarEnabled ? 'Enabled' : 'Disabled',
onTap: _toggleAppBar,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
ConfiguraTile(
tileColor: Colors.black,
leading: Icon(
_implyLeading ? Icons.visibility : Icons.visibility_off,
color: Colors.white,
),
title: 'Toggle Leading',
subtitle: _implyLeading ? 'On' : 'Off',
onTap: _toggleImplyLeading,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
ConfiguraTile(
tileColor: Colors.black,
leading: Icon(
_trailingEnabled ? Icons.more_vert : Icons.close,
color: Colors.white,
),
title: 'Toggle Trailing',
subtitle: _trailingEnabled ? 'On' : 'Off',
onTap: _toggleTrailing,
iconColor: Colors.white,
titleColor: Colors.white,
subtitleColor: Colors.white,
trailing: const Icon(
Icons.arrow_forward,
),
trailingColor: Colors.white,
),
],
debugMode: DebugMode.userFriendly,
customErrorMessage: 'Oops! Something went wrong.',
);
}
}

copied to clipboard


Floating Action Button Configuration #
You can configure a floating action button using the ConfiguraFab class. Here's an example:
fabConfig: ConfiguraFab(
visibility: true,
color: Colors.black,
icon: Icons.home,
iconColor: Colors.white,
onFabTap: () {
// Add logic for FAB tap
},
);
copied to clipboard


Debug Modes #
ConfiguraTiles supports different debug modes to help with development. You can set the debug mode using the debugMode parameter:
class DebugDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ConfiguraTileForge(
debugMode: DebugMode.console,
tiles: [
ConfiguraTile(
leading: Icon(Icons.info),
title: 'Console Debug Mode',
onTap: () {
print('Tile tapped');
},
),
],
);
}
}
copied to clipboard

Project Links and Social Media #
Project Links #


ConfiguraTiles Demo: GitHub


Clone ConfiguraTiles Demo: [email protected]:TheSageAnomaly/configura_tiles_demo.git


Demo APK: Download APK


ConfiguraTiles Package: GitHub


Clone ConfiguraTiles Package: [email protected]:TheSageAnomaly/configura_tiles.git


Social Media #

GitHub: TheSageAnomaly
X (formerly Twitter): TheSageAnomaly

Feel free to explore and contribute to the project! For any questions or support, reach out to us on our social media platforms.