Remove unused UI screens: ModalScreen, NotificationScreen, TabsScreen, ToastMessageScreen
This commit is contained in:
parent
d4465b8fb3
commit
c6f45b8852
@ -1,45 +0,0 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:marco/controller/my_controller.dart';
|
||||
import 'package:marco/helpers/extensions/string.dart';
|
||||
import 'package:marco/helpers/widgets/my_text_utils.dart';
|
||||
import 'package:marco/model/visitor_by_channels_model.dart';
|
||||
import 'package:marco/view/other/basic_table_screen.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BasicTableController extends MyController {
|
||||
List<Data> datas = Data.factory();
|
||||
DataTableSource? data;
|
||||
List<VisitorByChannelsModel> visitorByChannel = [];
|
||||
|
||||
@override
|
||||
void onInit() {
|
||||
super.onInit();
|
||||
VisitorByChannelsModel.dummyList.then((value) {
|
||||
visitorByChannel = value;
|
||||
update();
|
||||
});
|
||||
data = MyData(datas);
|
||||
}
|
||||
|
||||
void removeData(index) {
|
||||
visitorByChannel.removeAt(index);
|
||||
update();
|
||||
}
|
||||
}
|
||||
|
||||
class Data {
|
||||
final int id, qty;
|
||||
final String name;
|
||||
final String code;
|
||||
final double amount;
|
||||
|
||||
Data(this.id, this.qty, this.name, this.code, this.amount);
|
||||
|
||||
static factory([int seeds = 30]) {
|
||||
return List.generate(
|
||||
seeds,
|
||||
(index) => Data(index + 1, Random().nextInt(100), MyTextUtils.getDummyText(2, withStop: false),
|
||||
MyTextUtils.getDummyText(1, withStop: false).toLowerCase(), (Random().nextDouble() * 100).toStringAsPrecision(2).toDouble()));
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
||||
import 'package:marco/controller/my_controller.dart';
|
||||
|
||||
class GoogleMapScreenController extends MyController {
|
||||
late GoogleMapController mapController;
|
||||
|
||||
LatLng center = LatLng(37.7749, -122.4194);
|
||||
|
||||
void onMapCreated(GoogleMapController controller) {
|
||||
mapController = controller;
|
||||
}
|
||||
}
|
||||
@ -1,480 +0,0 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:marco/controller/my_controller.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:syncfusion_flutter_maps/maps.dart';
|
||||
|
||||
class MapController extends MyController {
|
||||
late List<Model> data;
|
||||
late MapShapeSource dataSource;
|
||||
late MapShapeSource source;
|
||||
late List<CountryTimeInGMT> timeZones;
|
||||
late MapShapeSource mapSource;
|
||||
late List<CountryDensity> worldPopulationDensity;
|
||||
|
||||
final NumberFormat numberFormat = NumberFormat('#.#');
|
||||
late MapShapeSource mapSource1;
|
||||
late List<TimeDetails> worldClockData;
|
||||
late MapShapeSource mapSource2;
|
||||
|
||||
@override
|
||||
void onInit() {
|
||||
data = <Model>[
|
||||
Model('New South Wales', 'New South Wales'),
|
||||
Model('Queensland', 'Queensland'),
|
||||
Model('Northern Territory', 'Northern sTerritory'),
|
||||
Model('Victoria', 'Victoria'),
|
||||
Model('South Australia', 'South Australia'),
|
||||
Model('Western Australia', 'Western Australia'),
|
||||
Model('Tasmania', 'Tasmania'),
|
||||
];
|
||||
|
||||
dataSource = MapShapeSource.asset(
|
||||
'assets/data/australia.json',
|
||||
shapeDataField: 'STATE_NAME',
|
||||
dataCount: data.length,
|
||||
primaryValueMapper: (int index) => data[index].state,
|
||||
dataLabelMapper: (int index) => data[index].dataLabel,
|
||||
);
|
||||
source = const MapShapeSource.network(
|
||||
'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
timeZones = <CountryTimeInGMT>[
|
||||
CountryTimeInGMT('Albania', 'GMT+2'),
|
||||
CountryTimeInGMT('Aland', 'GMT+3'),
|
||||
CountryTimeInGMT('Andorra', 'GMT+1'),
|
||||
CountryTimeInGMT('Austria', 'GMT+2'),
|
||||
CountryTimeInGMT('Belgium', 'GMT+2'),
|
||||
CountryTimeInGMT('Bulgaria', 'GMT+3'),
|
||||
CountryTimeInGMT('Bosnia and Herz.', 'GMT+2'),
|
||||
CountryTimeInGMT('Belarus', 'GMT+3'),
|
||||
CountryTimeInGMT('Switzerland', 'GMT+2'),
|
||||
CountryTimeInGMT('Czech Rep.', 'GMT+2'),
|
||||
CountryTimeInGMT('Germany', 'GMT+2'),
|
||||
CountryTimeInGMT('Denmark', 'GMT+2'),
|
||||
CountryTimeInGMT('Spain', 'GMT+2'),
|
||||
CountryTimeInGMT('Estonia', 'GMT+3'),
|
||||
CountryTimeInGMT('Finland', 'GMT+3'),
|
||||
CountryTimeInGMT('France', 'GMT+2'),
|
||||
CountryTimeInGMT('Faeroe Is.', 'GMT+1'),
|
||||
CountryTimeInGMT('United Kingdom', 'GMT+1'),
|
||||
CountryTimeInGMT('Guernsey', 'GMT+1'),
|
||||
CountryTimeInGMT('Greece', 'GMT+3'),
|
||||
CountryTimeInGMT('Croatia', 'GMT+2'),
|
||||
CountryTimeInGMT('Hungary', 'GMT+2'),
|
||||
CountryTimeInGMT('Isle of Man', 'GMT+1'),
|
||||
CountryTimeInGMT('Ireland', 'GMT+1'),
|
||||
CountryTimeInGMT('Iceland', 'GMT+0'),
|
||||
CountryTimeInGMT('Italy', 'GMT+2'),
|
||||
CountryTimeInGMT('Jersey', 'GMT+1'),
|
||||
CountryTimeInGMT('Kosovo', 'GMT+2'),
|
||||
CountryTimeInGMT('Liechtenstein', 'GMT+2'),
|
||||
CountryTimeInGMT('Lithuania', 'GMT+3'),
|
||||
CountryTimeInGMT('Luxembourg', 'GMT+2'),
|
||||
CountryTimeInGMT('Latvia', 'GMT+3'),
|
||||
CountryTimeInGMT('Monaco', 'GMT+2'),
|
||||
CountryTimeInGMT('Moldova', 'GMT+3'),
|
||||
CountryTimeInGMT('Macedonia', 'GMT+2'),
|
||||
CountryTimeInGMT('Malta', 'GMT+2'),
|
||||
CountryTimeInGMT('Montenegro', 'GMT+2'),
|
||||
CountryTimeInGMT('Netherlands', 'GMT+2'),
|
||||
CountryTimeInGMT('Norway', 'GMT+2'),
|
||||
CountryTimeInGMT('Poland', 'GMT+2'),
|
||||
CountryTimeInGMT('Portugal', 'GMT+1'),
|
||||
CountryTimeInGMT('Romania', 'GMT+3'),
|
||||
CountryTimeInGMT('San Marino', 'GMT+2'),
|
||||
CountryTimeInGMT('Serbia', 'GMT+2'),
|
||||
CountryTimeInGMT('Slovakia', 'GMT+2'),
|
||||
CountryTimeInGMT('Slovenia', 'GMT+2'),
|
||||
CountryTimeInGMT('Sweden', 'GMT+2'),
|
||||
CountryTimeInGMT('Ukraine', 'GMT+3'),
|
||||
CountryTimeInGMT('Vatican', 'GMT+1'),
|
||||
];
|
||||
mapSource = MapShapeSource.asset(
|
||||
'assets/data/europe_map.json',
|
||||
shapeDataField: 'name',
|
||||
dataCount: timeZones.length,
|
||||
primaryValueMapper: (int index) => timeZones[index].countryName,
|
||||
shapeColorValueMapper: (int index) => timeZones[index].gmtTime,
|
||||
shapeColorMappers: <MapColorMapper>[
|
||||
const MapColorMapper(value: 'GMT+0', color: Colors.lightBlue, text: 'GMT+0'),
|
||||
const MapColorMapper(value: 'GMT+1', color: Colors.orangeAccent, text: 'GMT+1'),
|
||||
const MapColorMapper(value: 'GMT+2', color: Colors.lightGreen, text: 'GMT+2'),
|
||||
const MapColorMapper(value: 'GMT+3', color: Colors.purple, text: 'GMT+3'),
|
||||
],
|
||||
);
|
||||
|
||||
worldPopulationDensity = <CountryDensity>[
|
||||
CountryDensity('Monaco', 26337),
|
||||
CountryDensity('Macao', 21717),
|
||||
CountryDensity('Singapore', 8358),
|
||||
CountryDensity('Hong kong', 7140),
|
||||
CountryDensity('Gibraltar', 3369),
|
||||
CountryDensity('Bahrain', 2239),
|
||||
CountryDensity('Holy See', 1820),
|
||||
CountryDensity('Maldives', 1802),
|
||||
CountryDensity('Malta', 1380),
|
||||
CountryDensity('Bangladesh', 1265),
|
||||
CountryDensity('Sint Maarten', 1261),
|
||||
CountryDensity('Bermuda', 1246),
|
||||
CountryDensity('Channel Islands', 915),
|
||||
CountryDensity('State of Palestine', 847),
|
||||
CountryDensity('Saint-Martin', 729),
|
||||
CountryDensity('Mayotte', 727),
|
||||
CountryDensity('Taiwan', 672),
|
||||
CountryDensity('Barbados', 668),
|
||||
CountryDensity('Lebanon', 667),
|
||||
CountryDensity('Mauritius', 626),
|
||||
CountryDensity('Aruba', 593),
|
||||
CountryDensity('San Marino', 565),
|
||||
CountryDensity('Nauru', 541),
|
||||
CountryDensity('Korea', 527),
|
||||
CountryDensity('Rwanda', 525),
|
||||
CountryDensity('Netherlands', 508),
|
||||
CountryDensity('Comoros', 467),
|
||||
CountryDensity('India', 464),
|
||||
CountryDensity('Burundi', 463),
|
||||
CountryDensity('Saint-Barthélemy', 449),
|
||||
CountryDensity('Haiti', 413),
|
||||
CountryDensity('Israel', 400),
|
||||
CountryDensity('Tuvalu', 393),
|
||||
CountryDensity('Belgium', 382),
|
||||
CountryDensity('Curacao', 369),
|
||||
CountryDensity('Philippines', 367),
|
||||
CountryDensity('Reunion', 358),
|
||||
CountryDensity('Martinique', 354),
|
||||
CountryDensity('Japan', 346),
|
||||
CountryDensity('Sri Lanka', 341),
|
||||
CountryDensity('Grenada', 331),
|
||||
CountryDensity('Marshall Islands', 328),
|
||||
CountryDensity('Puerto Rico', 322),
|
||||
CountryDensity('Vietnam', 313),
|
||||
CountryDensity('El Salvador', 313),
|
||||
CountryDensity('Guam', 312),
|
||||
CountryDensity('Saint Lucia', 301),
|
||||
CountryDensity('United States Virgin Islands', 298),
|
||||
CountryDensity('Pakistan', 286),
|
||||
CountryDensity('Saint Vincent and the Grenadines', 284),
|
||||
CountryDensity('United Kingdom', 280),
|
||||
CountryDensity('American Samoa', 276),
|
||||
CountryDensity('Cayman Islands', 273),
|
||||
CountryDensity('Jamaica', 273),
|
||||
CountryDensity('Trinidad and Tobago', 272),
|
||||
CountryDensity('Qatar', 248),
|
||||
CountryDensity('Guadeloupe', 245),
|
||||
CountryDensity('Luxembourg', 241),
|
||||
CountryDensity('Germany', 240),
|
||||
CountryDensity('Kuwait', 239),
|
||||
CountryDensity('Gambia', 238),
|
||||
CountryDensity('Liechtenstein', 238),
|
||||
CountryDensity('Uganda', 228),
|
||||
CountryDensity('Sao Tome and Principe', 228),
|
||||
CountryDensity('Nigeria', 226),
|
||||
CountryDensity('Dominican Rep.', 224),
|
||||
CountryDensity('Antigua and Barbuda', 222),
|
||||
CountryDensity('Switzerland', 219),
|
||||
CountryDensity('Dem. Rep. Korea', 214),
|
||||
CountryDensity('Seychelles', 213),
|
||||
CountryDensity('Italy', 205),
|
||||
CountryDensity('Saint Kitts and Nevis', 204),
|
||||
CountryDensity('Nepal', 203),
|
||||
CountryDensity('Malawi', 202),
|
||||
CountryDensity('British Virgin Islands', 201),
|
||||
CountryDensity('Guatemala', 167),
|
||||
CountryDensity('Anguilla', 166),
|
||||
CountryDensity('Andorra', 164),
|
||||
CountryDensity('Micronesia', 164),
|
||||
CountryDensity('China', 153),
|
||||
CountryDensity('Togo', 152),
|
||||
CountryDensity('Indonesia', 151),
|
||||
CountryDensity('Isle of Man', 149),
|
||||
CountryDensity('Kiribati', 147),
|
||||
CountryDensity('Tonga', 146),
|
||||
CountryDensity('Czech Rep.', 138),
|
||||
CountryDensity('Cabo Verde', 138),
|
||||
CountryDensity('Thailand', 136),
|
||||
CountryDensity('Ghana', 136),
|
||||
CountryDensity('Denmark', 136),
|
||||
CountryDensity('Tokelau', 135),
|
||||
CountryDensity('Cyprus', 130),
|
||||
CountryDensity('Northern Mariana Islands', 125),
|
||||
CountryDensity('Poland', 123),
|
||||
CountryDensity('Moldova', 122),
|
||||
CountryDensity('Azerbaijan', 122),
|
||||
CountryDensity('France', 119),
|
||||
CountryDensity('United Arab Emirates', 118),
|
||||
CountryDensity('Ethiopia', 115),
|
||||
CountryDensity('Jordan', 114),
|
||||
CountryDensity('Slovakia', 113),
|
||||
CountryDensity('Portugal', 111),
|
||||
CountryDensity('Sierra Leone', 110),
|
||||
CountryDensity('Turkey', 109),
|
||||
CountryDensity('Austria', 109),
|
||||
CountryDensity('Benin', 107),
|
||||
CountryDensity('Hungary', 106),
|
||||
CountryDensity('Cuba', 106),
|
||||
CountryDensity('Albania', 105),
|
||||
CountryDensity('Armenia', 104),
|
||||
CountryDensity('Slovenia', 103),
|
||||
CountryDensity('Egypt', 102),
|
||||
CountryDensity('Serbia', 99),
|
||||
CountryDensity('Costa Rica', 99),
|
||||
CountryDensity('Malaysia', 98),
|
||||
CountryDensity('Dominica', 95),
|
||||
CountryDensity('Syria', 95),
|
||||
CountryDensity('Cambodia', 94),
|
||||
CountryDensity('Kenya', 94),
|
||||
CountryDensity('Spain', 93),
|
||||
CountryDensity('Iraq', 92),
|
||||
CountryDensity('Timor-Leste', 88),
|
||||
CountryDensity('Honduras', 88),
|
||||
CountryDensity('Senegal', 86),
|
||||
CountryDensity('Romania', 83),
|
||||
CountryDensity('Myanmar', 83),
|
||||
CountryDensity('Brunei Darussalam', 83),
|
||||
CountryDensity("Côte d'Ivoire", 82),
|
||||
CountryDensity('Morocco', 82),
|
||||
CountryDensity('Macedonia', 82),
|
||||
CountryDensity('Greece', 80),
|
||||
CountryDensity('Wallis and Futuna Islands', 80),
|
||||
CountryDensity('Bonaire, Sint Eustatius and Saba', 79),
|
||||
CountryDensity('Uzbekistan', 78),
|
||||
CountryDensity('French Polynesia', 76),
|
||||
CountryDensity('Burkina Faso', 76),
|
||||
CountryDensity('Tunisia', 76),
|
||||
CountryDensity('Ukraine', 75),
|
||||
CountryDensity('Croatia', 73),
|
||||
CountryDensity('Cook Islands', 73),
|
||||
CountryDensity('Ireland', 71),
|
||||
CountryDensity('Ecuador', 71),
|
||||
CountryDensity('Lesotho', 70),
|
||||
CountryDensity('Samoa', 70),
|
||||
CountryDensity('Guinea-Bissau', 69),
|
||||
CountryDensity('Tajikistan', 68),
|
||||
CountryDensity('Eswatini', 67),
|
||||
CountryDensity('Tanzania', 67),
|
||||
CountryDensity('Mexico', 66),
|
||||
CountryDensity('Bosnia and Herz.', 64),
|
||||
CountryDensity('Bulgaria', 64),
|
||||
CountryDensity('Afghanistan', 59),
|
||||
CountryDensity('Panama', 58),
|
||||
CountryDensity('Georgia', 57),
|
||||
CountryDensity('Yemen', 56),
|
||||
CountryDensity('Cameroon', 56),
|
||||
CountryDensity('Nicaragua', 55),
|
||||
CountryDensity('Guinea', 53),
|
||||
CountryDensity('Liberia', 52),
|
||||
CountryDensity('Iran', 51),
|
||||
CountryDensity('Eq. Guinea', 50),
|
||||
CountryDensity('Montserrat', 49),
|
||||
CountryDensity('Fiji', 49),
|
||||
CountryDensity('South Africa', 48),
|
||||
CountryDensity('Madagascar', 47),
|
||||
CountryDensity('Montenegro', 46),
|
||||
CountryDensity('Belarus', 46),
|
||||
CountryDensity('Colombia', 45),
|
||||
CountryDensity('Lithuania', 43),
|
||||
CountryDensity('Djibouti', 42),
|
||||
CountryDensity('Turks and Caicos Islands', 40),
|
||||
CountryDensity('Mozambique', 39),
|
||||
CountryDensity('Dem. Rep. Congo', 39),
|
||||
CountryDensity('Palau', 39),
|
||||
CountryDensity('Bahamas', 39),
|
||||
CountryDensity('Zimbabwe', 38),
|
||||
CountryDensity('United States of America', 36),
|
||||
CountryDensity('Eritrea', 35),
|
||||
CountryDensity('Faroe Islands', 35),
|
||||
CountryDensity('Kyrgyzstan', 34),
|
||||
CountryDensity('Venezuela', 32),
|
||||
CountryDensity('Lao PDR', 31),
|
||||
CountryDensity('Estonia', 31),
|
||||
CountryDensity('Latvia', 30),
|
||||
CountryDensity('Angola', 26),
|
||||
CountryDensity('Peru', 25),
|
||||
CountryDensity('Chile', 25),
|
||||
CountryDensity('Brazil', 25),
|
||||
CountryDensity('Somalia', 25),
|
||||
CountryDensity('Vanuatu', 25),
|
||||
CountryDensity('Saint Pierre and Miquelon', 25),
|
||||
CountryDensity('Sudan', 24),
|
||||
CountryDensity('Zambia', 24),
|
||||
CountryDensity('Sweden', 24),
|
||||
CountryDensity('Solomon Islands', 24),
|
||||
CountryDensity('Bhutan', 20),
|
||||
CountryDensity('Uruguay', 19),
|
||||
CountryDensity('Papua New Guinea', 19),
|
||||
CountryDensity('Niger', 19),
|
||||
CountryDensity('Algeria', 18),
|
||||
CountryDensity('S. Sudan', 18),
|
||||
CountryDensity('New Zealand', 18),
|
||||
CountryDensity('Finland', 18),
|
||||
CountryDensity('Paraguay', 17),
|
||||
CountryDensity('Belize', 17),
|
||||
CountryDensity('Mali', 16),
|
||||
CountryDensity('Argentina', 16),
|
||||
CountryDensity('Oman', 16),
|
||||
CountryDensity('Saudi Arabia', 16),
|
||||
CountryDensity('Congo', 16),
|
||||
CountryDensity('New Caledonia', 15),
|
||||
CountryDensity('Saint Helena', 15),
|
||||
CountryDensity('Norway', 14),
|
||||
CountryDensity('Chad', 13),
|
||||
CountryDensity('Turkmenistan', 12),
|
||||
CountryDensity('Bolivia', 10),
|
||||
CountryDensity('Russia', 8),
|
||||
CountryDensity('Gabon', 8),
|
||||
CountryDensity('Central African Rep.', 7),
|
||||
CountryDensity('Kazakhstan', 6),
|
||||
CountryDensity('Niue', 6),
|
||||
CountryDensity('Mauritania', 4),
|
||||
CountryDensity('Canada', 4),
|
||||
CountryDensity('Botswana', 4),
|
||||
CountryDensity('Guyana', 3),
|
||||
CountryDensity('Libya', 3),
|
||||
CountryDensity('Suriname', 3),
|
||||
CountryDensity('French Guiana', 3),
|
||||
CountryDensity('Iceland', 3),
|
||||
CountryDensity('Australia', 3),
|
||||
CountryDensity('Namibia', 3),
|
||||
CountryDensity('W. Sahara', 2),
|
||||
CountryDensity('Mongolia', 2),
|
||||
CountryDensity('Falkland Is.', 0.2),
|
||||
CountryDensity('Greenland', 0.1),
|
||||
];
|
||||
mapSource1 = MapShapeSource.asset(
|
||||
'assets/data/world_map.json',
|
||||
shapeDataField: 'name',
|
||||
dataCount: worldPopulationDensity.length,
|
||||
primaryValueMapper: (int index) => worldPopulationDensity[index].countryName,
|
||||
shapeColorValueMapper: (int index) => worldPopulationDensity[index].density,
|
||||
shapeColorMappers: <MapColorMapper>[
|
||||
const MapColorMapper(from: 0, to: 100, color: Color.fromRGBO(128, 159, 255, 1), text: '{0},{100}'),
|
||||
const MapColorMapper(from: 100, to: 500, color: Color.fromRGBO(51, 102, 255, 1), text: '500'),
|
||||
const MapColorMapper(from: 500, to: 1000, color: Color.fromRGBO(0, 57, 230, 1), text: '1k'),
|
||||
const MapColorMapper(from: 1000, to: 5000, color: Color.fromRGBO(0, 45, 179, 1), text: '5k'),
|
||||
const MapColorMapper(from: 5000, to: 50000, color: Color.fromRGBO(0, 26, 102, 1), text: '50k'),
|
||||
],
|
||||
);
|
||||
final DateTime currentTime = DateTime.now().toUtc();
|
||||
|
||||
worldClockData = <TimeDetails>[
|
||||
TimeDetails('Seattle', 47.60621, -122.332071, currentTime.subtract(const Duration(hours: 7))),
|
||||
TimeDetails('Belem', -1.455833, -48.503887, currentTime.subtract(const Duration(hours: 3))),
|
||||
TimeDetails('Greenland', 71.706936, -42.604303, currentTime.subtract(const Duration(hours: 2))),
|
||||
TimeDetails('Yakutsk', 62.035452, 129.675475, currentTime.add(const Duration(hours: 9))),
|
||||
TimeDetails('Delhi', 28.704059, 77.10249, currentTime.add(const Duration(hours: 5, minutes: 30))),
|
||||
TimeDetails('Brisbane', -27.469771, 153.025124, currentTime.add(const Duration(hours: 10))),
|
||||
TimeDetails('Harare', -17.825166, 31.03351, currentTime.add(const Duration(hours: 2))),
|
||||
];
|
||||
|
||||
mapSource2 = const MapShapeSource.asset(
|
||||
'assets/data/world_map.json',
|
||||
shapeDataField: 'name',
|
||||
);
|
||||
|
||||
super.onInit();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
timeZones.clear();
|
||||
worldPopulationDensity.clear();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
class TimeDetails {
|
||||
TimeDetails(this.countryName, this.latitude, this.longitude, this.date);
|
||||
|
||||
final String countryName;
|
||||
final double latitude;
|
||||
final double longitude;
|
||||
final DateTime date;
|
||||
}
|
||||
|
||||
class CountryDensity {
|
||||
CountryDensity(this.countryName, this.density);
|
||||
|
||||
final String countryName;
|
||||
final double density;
|
||||
}
|
||||
|
||||
class CountryTimeInGMT {
|
||||
CountryTimeInGMT(this.countryName, this.gmtTime);
|
||||
|
||||
final String countryName;
|
||||
final String gmtTime;
|
||||
}
|
||||
|
||||
class Model {
|
||||
Model(this.state, this.dataLabel);
|
||||
|
||||
String state;
|
||||
String dataLabel;
|
||||
}
|
||||
|
||||
class ClockWidget extends StatefulWidget {
|
||||
const ClockWidget({super.key, required this.countryName, required this.date});
|
||||
|
||||
final String countryName;
|
||||
final DateTime date;
|
||||
|
||||
@override
|
||||
_ClockWidgetState createState() => _ClockWidgetState();
|
||||
}
|
||||
|
||||
class _ClockWidgetState extends State<ClockWidget> {
|
||||
late String _currentTime;
|
||||
late DateTime _date;
|
||||
Timer? _timer;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_date = widget.date;
|
||||
_currentTime = _getFormattedDateTime(widget.date);
|
||||
_timer = Timer.periodic(const Duration(seconds: 1), (Timer t) => _updateTime(_date));
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_timer!.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Center(
|
||||
child: Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.red),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
widget.countryName,
|
||||
style: Theme.of(context).textTheme.bodyMedium!.copyWith(fontWeight: FontWeight.bold),
|
||||
),
|
||||
Center(
|
||||
child: Text(_currentTime, style: Theme.of(context).textTheme.labelSmall!.copyWith(letterSpacing: 0.5, fontWeight: FontWeight.w500)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _updateTime(DateTime currentDate) {
|
||||
_date = currentDate.add(const Duration(seconds: 1));
|
||||
setState(() {
|
||||
_currentTime = DateFormat('hh:mm:ss a').format(_date);
|
||||
});
|
||||
}
|
||||
|
||||
String _getFormattedDateTime(DateTime dateTime) {
|
||||
return DateFormat('hh:mm:ss a').format(dateTime);
|
||||
}
|
||||
}
|
||||
@ -1,320 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:marco/controller/my_controller.dart';
|
||||
import 'package:marco/model/chart_model.dart';
|
||||
import 'package:syncfusion_flutter_charts/charts.dart';
|
||||
import 'dart:ui' as ui;
|
||||
|
||||
class ChartData {
|
||||
ChartData(this.x, this.y, this.y2);
|
||||
|
||||
final double x;
|
||||
final double y;
|
||||
final double y2;
|
||||
}
|
||||
|
||||
class SyncfusionChartController extends MyController {
|
||||
List<ChartData>? chartData;
|
||||
List<ChartSampleData>? gdpChartData;
|
||||
TooltipBehavior? tooltipBehavior;
|
||||
TooltipBehavior? areaTooltipBehavior;
|
||||
List<ChartSampleData>? barChartData;
|
||||
TooltipBehavior? bubbleTooltipBehavior;
|
||||
List<ChartSampleData>? scatterChartData;
|
||||
TooltipBehavior? scatterTooltipBehavior;
|
||||
List<ChartSampleData>? stepLineChartData;
|
||||
|
||||
@override
|
||||
void onInit() {
|
||||
stepLineChartData = <ChartSampleData>[
|
||||
ChartSampleData(x: 2006, y: 378, yValue: 463, secondSeriesYValue: 519, thirdSeriesYValue: 570),
|
||||
ChartSampleData(x: 2007, y: 416, yValue: 449, secondSeriesYValue: 508, thirdSeriesYValue: 579),
|
||||
ChartSampleData(x: 2008, y: 404, yValue: 458, secondSeriesYValue: 502, thirdSeriesYValue: 563),
|
||||
ChartSampleData(x: 2009, y: 390, yValue: 450, secondSeriesYValue: 495, thirdSeriesYValue: 550),
|
||||
ChartSampleData(x: 2010, y: 376, yValue: 425, secondSeriesYValue: 485, thirdSeriesYValue: 545),
|
||||
ChartSampleData(x: 2011, y: 365, yValue: 430, secondSeriesYValue: 470, thirdSeriesYValue: 525)
|
||||
];
|
||||
scatterTooltipBehavior = TooltipBehavior(enable: true, header: '', canShowMarker: false);
|
||||
scatterChartData = <ChartSampleData>[
|
||||
ChartSampleData(x: 1950, y: 0.8, secondSeriesYValue: 1.4, thirdSeriesYValue: 2),
|
||||
ChartSampleData(x: 1955, y: 1.2, secondSeriesYValue: 1.7, thirdSeriesYValue: 2.4),
|
||||
ChartSampleData(x: 1960, y: 0.9, secondSeriesYValue: 1.5, thirdSeriesYValue: 2.2),
|
||||
ChartSampleData(x: 1965, y: 1, secondSeriesYValue: 1.6, thirdSeriesYValue: 2.5),
|
||||
ChartSampleData(x: 1970, y: 0.8, secondSeriesYValue: 1.4, thirdSeriesYValue: 2.2),
|
||||
ChartSampleData(x: 1975, y: 1, secondSeriesYValue: 1.8, thirdSeriesYValue: 2.4),
|
||||
ChartSampleData(x: 1980, y: 1, secondSeriesYValue: 1.7, thirdSeriesYValue: 2),
|
||||
ChartSampleData(x: 1985, y: 1.2, secondSeriesYValue: 1.9, thirdSeriesYValue: 2.3),
|
||||
ChartSampleData(x: 1990, y: 1.1, secondSeriesYValue: 1.4, thirdSeriesYValue: 2),
|
||||
ChartSampleData(x: 1995, y: 1.2, secondSeriesYValue: 1.8, thirdSeriesYValue: 2.2),
|
||||
ChartSampleData(x: 2000, y: 1.4, secondSeriesYValue: 2, thirdSeriesYValue: 2.4),
|
||||
];
|
||||
|
||||
bubbleTooltipBehavior = TooltipBehavior(
|
||||
enable: true, header: '', canShowMarker: false, format: 'Literacy rate : point.x%\nGDP growth rate : point.y\nPopulation : point.sizeB');
|
||||
|
||||
areaTooltipBehavior = TooltipBehavior(enable: true, canShowMarker: false, tooltipPosition: TooltipPosition.pointer);
|
||||
chartData = <ChartData>[
|
||||
ChartData(2005, 21, 28),
|
||||
ChartData(2006, 24, 44),
|
||||
ChartData(2007, 36, 48),
|
||||
ChartData(2008, 38, 50),
|
||||
ChartData(2009, 54, 66),
|
||||
ChartData(2010, 57, 78),
|
||||
ChartData(2011, 70, 84)
|
||||
];
|
||||
barChartData = <ChartSampleData>[
|
||||
ChartSampleData(x: 'France', y: 84452000, secondSeriesYValue: 82682000, thirdSeriesYValue: 86861000),
|
||||
ChartSampleData(x: 'Spain', y: 68175000, secondSeriesYValue: 75315000, thirdSeriesYValue: 81786000),
|
||||
ChartSampleData(x: 'US', y: 77774000, secondSeriesYValue: 76407000, thirdSeriesYValue: 76941000),
|
||||
ChartSampleData(x: 'Italy', y: 50732000, secondSeriesYValue: 52372000, thirdSeriesYValue: 58253000),
|
||||
ChartSampleData(x: 'Mexico', y: 32093000, secondSeriesYValue: 35079000, thirdSeriesYValue: 39291000),
|
||||
ChartSampleData(x: 'UK', y: 34436000, secondSeriesYValue: 35814000, thirdSeriesYValue: 37651000),
|
||||
];
|
||||
gdpChartData = <ChartSampleData>[
|
||||
ChartSampleData(x: 1997, y: 17.79, secondSeriesYValue: 20.32, thirdSeriesYValue: 22.44),
|
||||
ChartSampleData(x: 1998, y: 18.20, secondSeriesYValue: 21.46, thirdSeriesYValue: 25.18),
|
||||
ChartSampleData(x: 1999, y: 17.44, secondSeriesYValue: 21.72, thirdSeriesYValue: 24.15),
|
||||
ChartSampleData(x: 2000, y: 19, secondSeriesYValue: 22.86, thirdSeriesYValue: 25.83),
|
||||
ChartSampleData(x: 2001, y: 18.93, secondSeriesYValue: 22.87, thirdSeriesYValue: 25.69),
|
||||
ChartSampleData(x: 2002, y: 17.58, secondSeriesYValue: 21.87, thirdSeriesYValue: 24.75),
|
||||
ChartSampleData(x: 2003, y: 16.83, secondSeriesYValue: 21.67, thirdSeriesYValue: 27.38),
|
||||
ChartSampleData(x: 2004, y: 17.93, secondSeriesYValue: 21.65, thirdSeriesYValue: 25.31)
|
||||
];
|
||||
tooltipBehavior = TooltipBehavior(enable: true, canShowMarker: false, header: '');
|
||||
super.onInit();
|
||||
}
|
||||
|
||||
List<StepLineSeries<ChartSampleData, num>> getDashedStepLineSeries() {
|
||||
return <StepLineSeries<ChartSampleData, num>>[
|
||||
StepLineSeries<ChartSampleData, num>(
|
||||
dataSource: stepLineChartData,
|
||||
xValueMapper: (ChartSampleData data, _) => data.x as num,
|
||||
yValueMapper: (ChartSampleData data, _) => data.y,
|
||||
name: 'USA',
|
||||
dashArray: const <double>[10, 5]),
|
||||
StepLineSeries<ChartSampleData, num>(
|
||||
dataSource: stepLineChartData,
|
||||
xValueMapper: (ChartSampleData data, _) => data.x as num,
|
||||
yValueMapper: (ChartSampleData data, _) => data.yValue,
|
||||
name: 'UK',
|
||||
dashArray: const <double>[10, 5]),
|
||||
StepLineSeries<ChartSampleData, num>(
|
||||
dataSource: stepLineChartData,
|
||||
xValueMapper: (ChartSampleData data, _) => data.x as num,
|
||||
yValueMapper: (ChartSampleData data, _) => data.secondSeriesYValue,
|
||||
name: 'Korea',
|
||||
dashArray: const <double>[10, 5]),
|
||||
StepLineSeries<ChartSampleData, num>(
|
||||
dataSource: stepLineChartData,
|
||||
xValueMapper: (ChartSampleData data, _) => data.x as num,
|
||||
yValueMapper: (ChartSampleData data, _) => data.thirdSeriesYValue,
|
||||
name: 'Japan',
|
||||
dashArray: const <double>[10, 5])
|
||||
];
|
||||
}
|
||||
|
||||
List<ScatterSeries<ChartSampleData, num>> getScatterShapesSeries() {
|
||||
return <ScatterSeries<ChartSampleData, num>>[
|
||||
ScatterSeries<ChartSampleData, num>(
|
||||
dataSource: scatterChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
markerSettings: const MarkerSettings(width: 15, height: 15, shape: DataMarkerType.diamond),
|
||||
name: 'India'),
|
||||
ScatterSeries<ChartSampleData, num>(
|
||||
dataSource: scatterChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue,
|
||||
markerSettings: const MarkerSettings(width: 15, height: 15, shape: DataMarkerType.triangle),
|
||||
name: 'China'),
|
||||
ScatterSeries<ChartSampleData, num>(
|
||||
dataSource: scatterChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue,
|
||||
markerSettings: const MarkerSettings(width: 15, height: 15, shape: DataMarkerType.pentagon),
|
||||
name: 'Japan')
|
||||
];
|
||||
}
|
||||
|
||||
List<BubbleSeries<ChartSampleData, num>> getMultipleBubbleSeries() {
|
||||
return <BubbleSeries<ChartSampleData, num>>[
|
||||
BubbleSeries<ChartSampleData, num>(
|
||||
opacity: 0.7,
|
||||
name: 'North America',
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'US', xValue: 99.4, y: 2.2, size: 0.312),
|
||||
ChartSampleData(x: 'Mexico', xValue: 86.1, y: 4.0, size: 0.115)
|
||||
],
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.xValue as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
sizeValueMapper: (ChartSampleData sales, _) => sales.size),
|
||||
BubbleSeries<ChartSampleData, num>(
|
||||
opacity: 0.7,
|
||||
name: 'Europe',
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'Germany', xValue: 99, y: 0.7, size: 0.0818),
|
||||
ChartSampleData(x: 'Russia', xValue: 99.6, y: 3.4, size: 0.143),
|
||||
ChartSampleData(x: 'Netherland', xValue: 79.2, y: 3.9, size: 0.162)
|
||||
],
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.xValue as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
sizeValueMapper: (ChartSampleData sales, _) => sales.size),
|
||||
BubbleSeries<ChartSampleData, num>(
|
||||
opacity: 0.7,
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'China', xValue: 92.2, y: 7.8, size: 1.347),
|
||||
ChartSampleData(x: 'India', xValue: 74, y: 6.5, size: 1.241),
|
||||
ChartSampleData(x: 'Indonesia', xValue: 90.4, y: 6.0, size: 0.238),
|
||||
ChartSampleData(x: 'Japan', xValue: 99, y: 0.2, size: 0.128),
|
||||
ChartSampleData(x: 'Philippines', xValue: 92.6, y: 6.6, size: 0.096),
|
||||
ChartSampleData(x: 'Hong Kong', xValue: 82.2, y: 3.97, size: 0.7),
|
||||
ChartSampleData(x: 'Jordan', xValue: 72.5, y: 4.5, size: 0.7),
|
||||
ChartSampleData(x: 'Australia', xValue: 81, y: 3.5, size: 0.21),
|
||||
ChartSampleData(x: 'Mongolia', xValue: 66.8, y: 3.9, size: 0.028),
|
||||
ChartSampleData(x: 'Taiwan', xValue: 78.4, y: 2.9, size: 0.231),
|
||||
],
|
||||
name: 'Asia',
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.xValue as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
sizeValueMapper: (ChartSampleData sales, _) => sales.size),
|
||||
BubbleSeries<ChartSampleData, num>(
|
||||
opacity: 0.7,
|
||||
name: 'Africa',
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'Egypt', xValue: 72, y: 2.0, size: 0.0826),
|
||||
ChartSampleData(x: 'Nigeria', xValue: 61.3, y: 1.45, size: 0.162),
|
||||
],
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.xValue as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
sizeValueMapper: (ChartSampleData sales, _) => sales.size),
|
||||
];
|
||||
}
|
||||
|
||||
List<BarSeries<ChartSampleData, String>> getDefaultBarSeries() {
|
||||
return <BarSeries<ChartSampleData, String>>[
|
||||
BarSeries<ChartSampleData, String>(
|
||||
dataSource: barChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
name: '2015'),
|
||||
BarSeries<ChartSampleData, String>(
|
||||
dataSource: barChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue,
|
||||
name: '2016'),
|
||||
BarSeries<ChartSampleData, String>(
|
||||
dataSource: barChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue,
|
||||
name: '2017')
|
||||
];
|
||||
}
|
||||
|
||||
List<CartesianSeries<ChartSampleData, String>> getAreaZoneSeries() {
|
||||
return <CartesianSeries<ChartSampleData, String>>[
|
||||
AreaSeries<ChartSampleData, String>(
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'Jan', y: 35.53),
|
||||
ChartSampleData(
|
||||
x: 'Feb',
|
||||
y: 46.06,
|
||||
),
|
||||
ChartSampleData(
|
||||
x: 'Mar',
|
||||
y: 46.06,
|
||||
),
|
||||
ChartSampleData(
|
||||
x: 'Apr',
|
||||
y: 50.86,
|
||||
),
|
||||
ChartSampleData(
|
||||
x: 'May',
|
||||
y: 60.89,
|
||||
),
|
||||
ChartSampleData(
|
||||
x: 'Jun',
|
||||
y: 70.27,
|
||||
),
|
||||
ChartSampleData(
|
||||
x: 'Jul',
|
||||
y: 75.65,
|
||||
),
|
||||
ChartSampleData(x: 'Aug', y: 74.7),
|
||||
ChartSampleData(
|
||||
x: 'Sep',
|
||||
y: 65.91,
|
||||
),
|
||||
ChartSampleData(x: 'Oct', y: 54.28),
|
||||
ChartSampleData(x: 'Nov', y: 46.33),
|
||||
ChartSampleData(x: 'Dec', y: 35.71),
|
||||
],
|
||||
name: 'US',
|
||||
onCreateShader: (ShaderDetails details) {
|
||||
return ui.Gradient.linear(details.rect.bottomLeft, details.rect.bottomRight, const <Color>[
|
||||
Color.fromRGBO(116, 182, 194, 1),
|
||||
Color.fromRGBO(75, 189, 138, 1),
|
||||
Color.fromRGBO(75, 189, 138, 1),
|
||||
Color.fromRGBO(255, 186, 83, 1),
|
||||
Color.fromRGBO(255, 186, 83, 1),
|
||||
Color.fromRGBO(194, 110, 21, 1),
|
||||
Color.fromRGBO(194, 110, 21, 1),
|
||||
Color.fromRGBO(116, 182, 194, 1),
|
||||
], <double>[
|
||||
0.165,
|
||||
0.165,
|
||||
0.416,
|
||||
0.416,
|
||||
0.666,
|
||||
0.666,
|
||||
0.918,
|
||||
0.918
|
||||
]);
|
||||
},
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
List<LineSeries<ChartData, num>> getDefaultLineSeries() {
|
||||
return <LineSeries<ChartData, num>>[
|
||||
LineSeries<ChartData, num>(
|
||||
dataSource: chartData,
|
||||
xValueMapper: (ChartData sales, _) => sales.x,
|
||||
yValueMapper: (ChartData sales, _) => sales.y,
|
||||
name: 'Germany',
|
||||
markerSettings: MarkerSettings(isVisible: true)),
|
||||
LineSeries<ChartData, num>(
|
||||
dataSource: chartData,
|
||||
name: 'England',
|
||||
xValueMapper: (ChartData sales, _) => sales.x,
|
||||
yValueMapper: (ChartData sales, _) => sales.y2,
|
||||
markerSettings: MarkerSettings(isVisible: true))
|
||||
];
|
||||
}
|
||||
|
||||
List<SplineSeries<ChartSampleData, num>> getDashedSplineSeries() {
|
||||
return <SplineSeries<ChartSampleData, num>>[
|
||||
SplineSeries<ChartSampleData, num>(
|
||||
dataSource: gdpChartData,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
name: 'Brazil',
|
||||
dashArray: <double>[12, 3, 3, 3],
|
||||
markerSettings: MarkerSettings(isVisible: true)),
|
||||
SplineSeries<ChartSampleData, num>(
|
||||
dataSource: gdpChartData,
|
||||
name: 'Sweden',
|
||||
dashArray: <double>[12, 3, 3, 3],
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.secondSeriesYValue,
|
||||
markerSettings: MarkerSettings(isVisible: true)),
|
||||
SplineSeries<ChartSampleData, num>(
|
||||
dataSource: gdpChartData,
|
||||
dashArray: <double>[12, 3, 3, 3],
|
||||
name: 'Greece',
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as num,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.thirdSeriesYValue,
|
||||
markerSettings: MarkerSettings(isVisible: true))
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -1,143 +0,0 @@
|
||||
import 'package:marco/controller/extra_pages/faqs_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class FaqsScreen extends StatefulWidget {
|
||||
const FaqsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<FaqsScreen> createState() => _FaqsScreenState();
|
||||
}
|
||||
|
||||
class _FaqsScreenState extends State<FaqsScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late FaqsController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = FaqsController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'faqs_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("FAQs", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Extra'), MyBreadcrumbItem(name: 'FAQs', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Column(
|
||||
children: [
|
||||
MyText.displaySmall("Frequently Asked Questions", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width * .4,
|
||||
child: MyText.bodyMedium(
|
||||
"Quick answer to questions you may have about Untitled Ui And billing. Can't find what you're looking for? check out our full document",
|
||||
fontWeight: 600,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
MySpacing.height(20),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
MyContainer(
|
||||
onTap: () {},
|
||||
paddingAll: 0,
|
||||
height: 32,
|
||||
width: 100,
|
||||
color: contentTheme.primary.withAlpha(32),
|
||||
child: Center(
|
||||
child: MyText.bodyMedium("Document", fontWeight: 600, color: contentTheme.primary),
|
||||
),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
MyContainer(
|
||||
color: contentTheme.primary,
|
||||
paddingAll: 0,
|
||||
height: 32,
|
||||
width: 150,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(LucideIcons.message_square, size: 20, color: contentTheme.onPrimary),
|
||||
MySpacing.width(8),
|
||||
MyText.bodyMedium("Get in touch", fontWeight: 600, color: contentTheme.onPrimary)
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
MySpacing.height(40),
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width * .6,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: <Widget>[
|
||||
ExpansionPanelList(
|
||||
elevation: 0,
|
||||
expandedHeaderPadding: EdgeInsets.all(0),
|
||||
expansionCallback: (int index, bool isExpanded) {
|
||||
setState(() {
|
||||
controller.dataExpansionPanel[index] = isExpanded;
|
||||
});
|
||||
},
|
||||
animationDuration: Duration(milliseconds: 500),
|
||||
children: <ExpansionPanel>[
|
||||
buildExpansion("What do we do", controller.dummyTexts[0], controller.dataExpansionPanel[0]),
|
||||
buildExpansion("Getting started with Untitled", controller.dummyTexts[1], controller.dataExpansionPanel[1]),
|
||||
buildExpansion("Install Untitled", controller.dummyTexts[2], controller.dataExpansionPanel[2]),
|
||||
buildExpansion("The Messenger", controller.dummyTexts[3], controller.dataExpansionPanel[3]),
|
||||
buildExpansion("One next-gen inbox", controller.dummyTexts[4], controller.dataExpansionPanel[4]),
|
||||
buildExpansion("How dose support work?", controller.dummyTexts[5], controller.dataExpansionPanel[5]),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
ExpansionPanel buildExpansion(String title, description, bool isExpanded) {
|
||||
return ExpansionPanel(
|
||||
canTapOnHeader: true,
|
||||
headerBuilder: (BuildContext context, bool isExpanded) {
|
||||
return ListTile(
|
||||
title: MyText.labelMedium(title, color: isExpanded ? theme.colorScheme.primary : theme.colorScheme.onSurface, fontWeight: isExpanded ? 700 : 600),
|
||||
);
|
||||
},
|
||||
body: MyContainer(child: MyText.labelMedium(description, fontWeight: 600)),
|
||||
isExpanded: isExpanded);
|
||||
}
|
||||
}
|
||||
@ -1,211 +0,0 @@
|
||||
import 'package:marco/controller/extra_pages/pricing_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_button.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/helpers/widgets/my_text_style.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class PricingScreen extends StatefulWidget {
|
||||
const PricingScreen({super.key});
|
||||
|
||||
@override
|
||||
State<PricingScreen> createState() => _PricingScreenState();
|
||||
}
|
||||
|
||||
class _PricingScreenState extends State<PricingScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late PricingController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = PricingController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'pricing_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Pricing", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Extra'), MyBreadcrumbItem(name: 'Pricing', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
runAlignment: WrapAlignment.center,
|
||||
wrapCrossAlignment: WrapCrossAlignment.center,
|
||||
wrapAlignment: WrapAlignment.center,
|
||||
children: [
|
||||
MyFlexItem(
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.bodyLarge("Find your perfect plan: Transparent Pricing Tailored to your needs", fontWeight: 600),
|
||||
MySpacing.height(20),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
MyText.bodyMedium(
|
||||
"Monthly",
|
||||
fontWeight: 600,
|
||||
color: !controller.isMonth ? contentTheme.primary : null,
|
||||
),
|
||||
Switch(
|
||||
value: controller.isMonth,
|
||||
activeColor: contentTheme.primary,
|
||||
onChanged: (bool value) => controller.onSelectMonth(),
|
||||
),
|
||||
MyText.bodyMedium(
|
||||
"Annual",
|
||||
fontWeight: 600,
|
||||
color: controller.isMonth ? contentTheme.primary : null,
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: 'xxl-2.5 xl-3.5 lg-12 sm-12',
|
||||
child: buildData(
|
||||
LucideIcons.zap,
|
||||
"Starter Plan",
|
||||
controller.isMonth ? "2.00" : "6.50",
|
||||
'Start with essential tools and storage for small teams and personal use.',
|
||||
'100 GB',
|
||||
'Basic Cloud Storage',
|
||||
'File Sharing & Access Controls',
|
||||
'Collaborative Workspaces',
|
||||
'Email and Chat Support',
|
||||
),
|
||||
),
|
||||
MyFlexItem(
|
||||
sizes: 'xxl-2.5 xl-3.5 lg-12 sm-12',
|
||||
child: buildData(
|
||||
LucideIcons.gem,
|
||||
"Advanced Plan",
|
||||
controller.isMonth ? "4.99" : "9.99",
|
||||
'Unlock powerful tools, larger storage, and enhanced security for growing teams.',
|
||||
'500 GB',
|
||||
'Advanced Security Features',
|
||||
'Team Collaboration & Project Management',
|
||||
'Custom Integrations',
|
||||
'Priority Email & Phone Support',
|
||||
),
|
||||
),
|
||||
MyFlexItem(
|
||||
sizes: 'xxl-2.5 xl-3.5 lg-12 sm-12',
|
||||
child: buildData(
|
||||
LucideIcons.graduation_cap,
|
||||
"Enterprise Plan",
|
||||
controller.isMonth ? "8.99" : "15.99",
|
||||
'Designed for large enterprises with unlimited storage and dedicated support.',
|
||||
'Unlimited Storage',
|
||||
'Enterprise-Grade Security & Compliance',
|
||||
'Custom API Access & Automation',
|
||||
'Dedicated Account Manager',
|
||||
'24/7 Premium Support & Dedicated Resources',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildData(IconData icon, String pricingType, price, description, title1, title2, title3, title4, title5) {
|
||||
Widget pricingDetail(String title) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(LucideIcons.check, size: 16),
|
||||
MySpacing.width(8),
|
||||
Expanded(
|
||||
child: MyText.bodySmall(
|
||||
title,
|
||||
fontWeight: 600,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return MyContainer(
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyContainer.roundBordered(
|
||||
borderColor: contentTheme.primary,
|
||||
paddingAll: 0,
|
||||
height: 44,
|
||||
width: 44,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: Icon(icon, size: 20),
|
||||
),
|
||||
MySpacing.height(16),
|
||||
MyText.bodyMedium(pricingType, fontWeight: 600),
|
||||
MySpacing.height(16),
|
||||
RichText(
|
||||
text: TextSpan(
|
||||
children: [
|
||||
TextSpan(text: "\$$price/", style: MyTextStyle.displaySmall(fontWeight: 900)),
|
||||
TextSpan(text: "Month", style: MyTextStyle.titleLarge(fontWeight: 700))
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(16),
|
||||
MyText.bodyMedium(description, fontWeight: 600, maxLines: 2),
|
||||
MySpacing.height(16),
|
||||
MyButton.block(
|
||||
elevation: 0,
|
||||
backgroundColor: contentTheme.primary,
|
||||
onPressed: () {},
|
||||
borderRadiusAll: 8,
|
||||
padding: MySpacing.y(20),
|
||||
child: MyText.bodyMedium("Get Started", fontWeight: 600, color: contentTheme.onPrimary)),
|
||||
MySpacing.height(16),
|
||||
MyText.bodyMedium("Everything in the ${pricingType.toLowerCase()} plan plus...", fontWeight: 600),
|
||||
MySpacing.height(16),
|
||||
pricingDetail(title1),
|
||||
MySpacing.height(16),
|
||||
pricingDetail(title2),
|
||||
MySpacing.height(16),
|
||||
pricingDetail(title3),
|
||||
MySpacing.height(16),
|
||||
pricingDetail(title4),
|
||||
MySpacing.height(16),
|
||||
pricingDetail(title5),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
import 'package:marco/controller/extra_pages/time_line_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/images.dart';
|
||||
import 'package:marco/model/time_line.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:timelines_plus/timelines_plus.dart';
|
||||
|
||||
class TimeLineScreen extends StatefulWidget {
|
||||
const TimeLineScreen({super.key});
|
||||
|
||||
@override
|
||||
State<TimeLineScreen> createState() => _TimeLineScreenState();
|
||||
}
|
||||
|
||||
class _TimeLineScreenState extends State<TimeLineScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late TimeLineController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = TimeLineController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'time_line_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Time Line", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Extra'), MyBreadcrumbItem(name: 'Time Line', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 800,
|
||||
child: Timeline.tileBuilder(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shrinkWrap: true,
|
||||
builder: TimelineTileBuilder.fromStyle(
|
||||
indicatorStyle: IndicatorStyle.outlined,
|
||||
itemCount: controller.timeline.length,
|
||||
contentsAlign: ContentsAlign.alternating,
|
||||
connectorStyle: ConnectorStyle.dashedLine,
|
||||
contentsBuilder: (context, index) {
|
||||
TimeLineModel time = controller.timeline[index];
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
width: 400,
|
||||
margin: MySpacing.x(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: index % 2 == 0 ? CrossAxisAlignment.start : CrossAxisAlignment.end,
|
||||
children: [
|
||||
MyText.bodyMedium(time.firstName, fontWeight: 600, overflow: TextOverflow.ellipsis),
|
||||
MySpacing.height(12),
|
||||
MyContainer(
|
||||
paddingAll: 0,
|
||||
height: 100,
|
||||
width: double.infinity,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: Image.asset(Images.dummy[index % Images.dummy.length], fit: BoxFit.cover),
|
||||
),
|
||||
MySpacing.height(12),
|
||||
MyText.bodyMedium(time.lastName, fontWeight: 600, overflow: TextOverflow.ellipsis),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall(
|
||||
time.email,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MySpacing.height(12),
|
||||
MyText.bodyMedium(
|
||||
controller.dummyTexts[index],
|
||||
fontWeight: 600,
|
||||
maxLines: 3,
|
||||
textAlign: index % 2 == 0 ? TextAlign.start : TextAlign.end,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,241 +0,0 @@
|
||||
import 'package:marco/controller/other/basic_table_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/utils/utils.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_list_extension.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class BasicTableScreen extends StatefulWidget {
|
||||
const BasicTableScreen({super.key});
|
||||
|
||||
@override
|
||||
State<BasicTableScreen> createState() => _BasicTableScreenState();
|
||||
}
|
||||
|
||||
class _BasicTableScreenState extends State<BasicTableScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late BasicTableController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = BasicTableController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Other", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Other'), MyBreadcrumbItem(name: 'Basic Table', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Column(
|
||||
children: [
|
||||
PaginatedDataTable(
|
||||
header: Row(
|
||||
children: [MyText.titleMedium("Product List", fontWeight: 600, fontSize: 20)],
|
||||
),
|
||||
arrowHeadColor: contentTheme.primary,
|
||||
source: controller.data!,
|
||||
columns: [
|
||||
DataColumn(
|
||||
label: MyText.bodyMedium(
|
||||
'Id',
|
||||
fontWeight: 600,
|
||||
)),
|
||||
DataColumn(
|
||||
label: MyText.bodyMedium(
|
||||
'Name',
|
||||
fontWeight: 600,
|
||||
)),
|
||||
DataColumn(label: MyText.bodyMedium('Code')),
|
||||
DataColumn(label: MyText.bodyMedium('Price')),
|
||||
DataColumn(label: MyText.bodyMedium('QTY')),
|
||||
DataColumn(label: MyText.bodyMedium('Action')),
|
||||
],
|
||||
columnSpacing: 230,
|
||||
horizontalMargin: 28,
|
||||
rowsPerPage: 10,
|
||||
),
|
||||
MySpacing.height(12),
|
||||
buildVisitorByChannel()
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildVisitorByChannel() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: .2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Visitors By Channel", fontWeight: 600),
|
||||
MySpacing.height(24),
|
||||
SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: DataTable(
|
||||
sortAscending: true,
|
||||
columnSpacing: 110,
|
||||
onSelectAll: (_) => {},
|
||||
headingRowColor: WidgetStatePropertyAll(contentTheme.primary.withAlpha(40)),
|
||||
dataRowMaxHeight: 60,
|
||||
showBottomBorder: true,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
border: TableBorder.all(borderRadius: BorderRadius.circular(8), style: BorderStyle.solid, width: .4, color: Colors.grey),
|
||||
columns: [
|
||||
DataColumn(label: MyText.labelLarge('S.No', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Channel', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Session', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Bounce Rate', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Session Duration', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Target Reached', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Page Per Session', color: contentTheme.primary)),
|
||||
DataColumn(label: MyText.labelLarge('Action', color: contentTheme.primary)),
|
||||
],
|
||||
rows: controller.visitorByChannel
|
||||
.mapIndexed((index, data) => DataRow(cells: [
|
||||
DataCell(MyText.bodyMedium('${data.id}')),
|
||||
DataCell(MyText.labelLarge(data.channel, overflow: TextOverflow.ellipsis, maxLines: 1)),
|
||||
DataCell(MyText.bodySmall('${data.session}', fontWeight: 600)),
|
||||
DataCell(MyText.bodySmall('${data.bounceRate}%', fontWeight: 600)),
|
||||
DataCell(MyText.bodySmall('${Utils.getDateTimeStringFromDateTime(data.sessionDuration)}', fontWeight: 600)),
|
||||
DataCell(
|
||||
MyContainer(
|
||||
borderRadiusAll: 4,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
padding: MySpacing.xy(8, 8),
|
||||
color: contentTheme.primary.withAlpha(32),
|
||||
child: MyText.bodySmall('${data.targetReached}', fontWeight: 600, color: contentTheme.primary),
|
||||
),
|
||||
),
|
||||
DataCell(MyText.bodyMedium('${data.pagePerSession}')),
|
||||
DataCell(Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyContainer(
|
||||
onTap: () => {},
|
||||
padding: MySpacing.xy(8, 8),
|
||||
color: contentTheme.primary.withAlpha(36),
|
||||
child: Icon(LucideIcons.pencil, size: 14, color: contentTheme.primary),
|
||||
),
|
||||
MyContainer(
|
||||
onTap: () => {},
|
||||
padding: MySpacing.xy(8, 8),
|
||||
color: contentTheme.success.withAlpha(36),
|
||||
child: Icon(LucideIcons.pencil, size: 14, color: contentTheme.success),
|
||||
),
|
||||
MyContainer(
|
||||
onTap: () => controller.removeData(index),
|
||||
padding: MySpacing.xy(8, 8),
|
||||
color: contentTheme.danger.withAlpha(36),
|
||||
child: Icon(LucideIcons.trash_2, size: 14, color: contentTheme.danger),
|
||||
),
|
||||
],
|
||||
)),
|
||||
]))
|
||||
.toList()),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyData extends DataTableSource with UIMixin {
|
||||
List<Data> data = [];
|
||||
|
||||
MyData(this.data);
|
||||
|
||||
@override
|
||||
bool get isRowCountApproximate => false;
|
||||
|
||||
@override
|
||||
int get rowCount => data.length;
|
||||
|
||||
@override
|
||||
int get selectedRowCount => 0;
|
||||
|
||||
@override
|
||||
DataRow getRow(int index) {
|
||||
return DataRow(
|
||||
cells: [
|
||||
DataCell(MyText.bodyMedium(
|
||||
data[index].id.toString(),
|
||||
fontWeight: 600,
|
||||
)),
|
||||
DataCell(MyText.bodyMedium(
|
||||
data[index].name,
|
||||
fontWeight: 600,
|
||||
)),
|
||||
DataCell(MyText.bodyMedium(data[index].code.toString())),
|
||||
DataCell(MyText.bodyMedium(data[index].amount.toString())),
|
||||
DataCell(MyText.bodyMedium(data[index].qty.toString())),
|
||||
DataCell(
|
||||
Align(
|
||||
alignment: Alignment.center,
|
||||
child: Row(
|
||||
children: [
|
||||
MyContainer.bordered(
|
||||
onTap: () => {},
|
||||
padding: MySpacing.xy(6, 6),
|
||||
borderColor: contentTheme.primary.withAlpha(40),
|
||||
child: Icon(
|
||||
LucideIcons.pencil,
|
||||
size: 12,
|
||||
color: contentTheme.primary,
|
||||
),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
MyContainer.bordered(
|
||||
onTap: () => {},
|
||||
padding: MySpacing.xy(6, 6),
|
||||
borderColor: contentTheme.primary.withAlpha(40),
|
||||
child: Icon(
|
||||
LucideIcons.trash_2,
|
||||
size: 12,
|
||||
color: contentTheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
||||
import 'package:marco/controller/other/google_map_screen_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
|
||||
class GoogleMapScreen extends StatefulWidget {
|
||||
const GoogleMapScreen({super.key});
|
||||
|
||||
@override
|
||||
State<GoogleMapScreen> createState() => _GoogleMapScreenState();
|
||||
}
|
||||
|
||||
class _GoogleMapScreenState extends State<GoogleMapScreen> with UIMixin {
|
||||
GoogleMapScreenController controller = Get.put(GoogleMapScreenController());
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Google Map",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Maps'),
|
||||
MyBreadcrumbItem(name: 'Google Map', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: MyContainer.none(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
height: 600,
|
||||
child: GoogleMap(
|
||||
onMapCreated: controller.onMapCreated,
|
||||
initialCameraPosition: CameraPosition(target: controller.center, zoom: 11.0),
|
||||
),
|
||||
)),
|
||||
],
|
||||
);
|
||||
}));
|
||||
}
|
||||
}
|
||||
@ -1,252 +0,0 @@
|
||||
import 'package:marco/controller/other/map_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:syncfusion_flutter_maps/maps.dart';
|
||||
|
||||
class MapScreen extends StatefulWidget {
|
||||
const MapScreen({super.key});
|
||||
|
||||
@override
|
||||
State<MapScreen> createState() => _MapScreenState();
|
||||
}
|
||||
|
||||
class _MapScreenState extends State<MapScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late MapController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = MapController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return GetBuilder(
|
||||
init: controller,
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Other", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Other'), MyBreadcrumbItem(name: 'Map', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(sizes: "lg-6", child: dataLabel()),
|
||||
MyFlexItem(sizes: "lg-6", child: europeanTimeZone()),
|
||||
MyFlexItem(sizes: "lg-6", child: worldPopulationDensity()),
|
||||
MyFlexItem(sizes: "lg-6", child: worldClock())
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget worldPopulationDensity() {
|
||||
return MyCard(
|
||||
borderRadiusAll: 8,
|
||||
paddingAll: 23,
|
||||
shadow: MyShadow(position: MyShadowPosition.bottom, elevation: .5),
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"World Population Density (per sq. km.)",
|
||||
fontWeight: 600,
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
SfMaps(
|
||||
layers: <MapLayer>[
|
||||
MapShapeLayer(
|
||||
loadingBuilder: (BuildContext context) {
|
||||
return const SizedBox(
|
||||
height: 25,
|
||||
width: 25,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
),
|
||||
);
|
||||
},
|
||||
source: controller.mapSource1,
|
||||
shapeTooltipBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Text(
|
||||
'${controller.worldPopulationDensity[index].countryName} : ${controller.numberFormat.format(controller.worldPopulationDensity[index].density)} per sq. km.',
|
||||
style: Theme.of(context).textTheme.bodySmall!.copyWith(color: Theme.of(context).colorScheme.surface)),
|
||||
);
|
||||
},
|
||||
strokeColor: Colors.white30,
|
||||
legend: const MapLegend.bar(MapElement.shape,
|
||||
position: MapLegendPosition.bottom,
|
||||
overflowMode: MapLegendOverflowMode.wrap,
|
||||
labelsPlacement: MapLegendLabelsPlacement.betweenItems,
|
||||
padding: EdgeInsets.only(top: 15),
|
||||
spacing: 1.0,
|
||||
segmentSize: Size(55.0, 9.0)),
|
||||
tooltipSettings: MapTooltipSettings(
|
||||
color: theme.colorScheme.brightness == Brightness.light ? const Color.fromRGBO(0, 32, 128, 1) : const Color.fromRGBO(226, 233, 255, 1),
|
||||
strokeColor: theme.colorScheme.brightness == Brightness.light ? Colors.white : Colors.black),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget worldClock() {
|
||||
return MyCard(
|
||||
borderRadiusAll: 8,
|
||||
paddingAll: 23,
|
||||
shadow: MyShadow(position: MyShadowPosition.bottom, elevation: .5),
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
'World Clock',
|
||||
fontWeight: 600,
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
SizedBox(
|
||||
height: 500,
|
||||
child: SfMaps(
|
||||
layers: <MapLayer>[
|
||||
MapShapeLayer(
|
||||
loadingBuilder: (BuildContext context) {
|
||||
return const SizedBox(
|
||||
height: 25,
|
||||
width: 25,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
),
|
||||
);
|
||||
},
|
||||
source: controller.mapSource2,
|
||||
initialMarkersCount: 7,
|
||||
markerBuilder: (_, int index) {
|
||||
return MapMarker(
|
||||
longitude: controller.worldClockData[index].longitude,
|
||||
latitude: controller.worldClockData[index].latitude,
|
||||
alignment: Alignment.topCenter,
|
||||
offset: Offset(0, -4),
|
||||
size: Size(150, 150),
|
||||
child: ClockWidget(countryName: controller.worldClockData[index].countryName, date: controller.worldClockData[index].date),
|
||||
);
|
||||
},
|
||||
strokeWidth: 0,
|
||||
color: theme.colorScheme.brightness == Brightness.light ? Color.fromRGBO(71, 70, 75, 0.2) : Color.fromRGBO(71, 70, 75, 1),
|
||||
),
|
||||
],
|
||||
)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget europeanTimeZone() {
|
||||
return MyCard(
|
||||
borderRadiusAll: 8,
|
||||
paddingAll: 23,
|
||||
shadow: MyShadow(position: MyShadowPosition.bottom, elevation: .5),
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"European Time Zones",
|
||||
fontWeight: 600,
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
SfMaps(
|
||||
layers: <MapLayer>[
|
||||
MapShapeLayer(
|
||||
loadingBuilder: (BuildContext context) {
|
||||
return const SizedBox(
|
||||
height: 25,
|
||||
width: 25,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
),
|
||||
);
|
||||
},
|
||||
source: controller.mapSource,
|
||||
shapeTooltipBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: MyText.bodyMedium(
|
||||
'${controller.timeZones[index].countryName} : ${controller.timeZones[index].gmtTime}',
|
||||
color: contentTheme.light,
|
||||
),
|
||||
);
|
||||
},
|
||||
legend: const MapLegend.bar(
|
||||
MapElement.shape,
|
||||
position: MapLegendPosition.bottom,
|
||||
padding: EdgeInsets.only(top: 15),
|
||||
segmentSize: Size(60.0, 10.0),
|
||||
),
|
||||
tooltipSettings: const MapTooltipSettings(color: Color.fromRGBO(45, 45, 45, 1)),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget dataLabel() {
|
||||
return MyCard(
|
||||
borderRadiusAll: 8,
|
||||
shadow: MyShadow(position: MyShadowPosition.bottom, elevation: .5),
|
||||
paddingAll: 23,
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
'Data Labels',
|
||||
fontWeight: 600,
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: controller.dataSource,
|
||||
showDataLabels: true,
|
||||
dataLabelSettings: const MapDataLabelSettings(
|
||||
overflowMode: MapLabelOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,409 +0,0 @@
|
||||
import 'package:marco/controller/other/syncfusion_chart_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/model/chart_model.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:syncfusion_flutter_charts/charts.dart';
|
||||
|
||||
class SyncFusionChartScreen extends StatefulWidget {
|
||||
const SyncFusionChartScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SyncFusionChartScreen> createState() => _SyncFusionChartScreenState();
|
||||
}
|
||||
|
||||
class _SyncFusionChartScreenState extends State<SyncFusionChartScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late SyncfusionChartController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = SyncfusionChartController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Other", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Other'), MyBreadcrumbItem(name: 'Syncfusion Chart', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildDefaultLineChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildCustomizedColumnChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildDashedSplineChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildAreaZoneChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildDefaultBarChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildMultipleSeriesBubbleChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildShapesScatterChart()),
|
||||
MyFlexItem(sizes: 'lg-6', child: _buildDashedStepLineChart()),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDashedStepLineChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'CO2 - Intensity analysis'),
|
||||
primaryXAxis: NumericAxis(
|
||||
interval: 1,
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
title: AxisTitle(text: 'Year'),
|
||||
),
|
||||
primaryYAxis: NumericAxis(
|
||||
axisLine: AxisLine(width: 0),
|
||||
minimum: 360,
|
||||
maximum: 600,
|
||||
interval: 30,
|
||||
majorTickLines: MajorTickLines(size: 0),
|
||||
title: AxisTitle(text: 'Intensity (g/kWh)'),
|
||||
),
|
||||
legend: Legend(isVisible: true, position: LegendPosition.bottom),
|
||||
tooltipBehavior: TooltipBehavior(enable: true),
|
||||
series: controller.getDashedStepLineSeries(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildShapesScatterChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'Inflation Analysis'),
|
||||
primaryXAxis: NumericAxis(
|
||||
minimum: 1945,
|
||||
maximum: 2005,
|
||||
title: AxisTitle(text: 'Year'),
|
||||
labelIntersectAction: AxisLabelIntersectAction.multipleRows,
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
),
|
||||
legend: Legend(isVisible: true, position: LegendPosition.bottom),
|
||||
primaryYAxis: NumericAxis(
|
||||
title: AxisTitle(text: 'Inflation Rate(%)'), labelFormat: '{value}%', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)),
|
||||
tooltipBehavior: controller.scatterTooltipBehavior,
|
||||
series: controller.getScatterShapesSeries(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDefaultLineChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'Inflation - Consumer price'),
|
||||
legend: Legend(isVisible: true, overflowMode: LegendItemOverflowMode.wrap, position: LegendPosition.bottom),
|
||||
primaryXAxis: NumericAxis(edgeLabelPlacement: EdgeLabelPlacement.shift, interval: 2, majorGridLines: MajorGridLines(width: 0)),
|
||||
primaryYAxis: NumericAxis(labelFormat: '{value}%', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(color: Colors.transparent)),
|
||||
series: controller.getDefaultLineSeries(),
|
||||
tooltipBehavior: TooltipBehavior(enable: true),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCustomizedColumnChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
title: ChartTitle(text: 'PC vendor shipments - 2015 Q1'),
|
||||
primaryXAxis: CategoryAxis(
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
),
|
||||
primaryYAxis: NumericAxis(
|
||||
labelFormat: '{value}M',
|
||||
title: AxisTitle(text: 'Shipments in million'),
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
majorTickLines: MajorTickLines(size: 0)),
|
||||
series: <CartesianSeries<ChartSampleData, String>>[
|
||||
ColumnSeries<ChartSampleData, String>(
|
||||
onCreateRenderer: (ChartSeries<ChartSampleData, String> series) {
|
||||
return _CustomColumnSeriesRenderer(ThemeData.light());
|
||||
},
|
||||
dataLabelSettings: DataLabelSettings(isVisible: true, labelAlignment: ChartDataLabelAlignment.middle),
|
||||
dataSource: <ChartSampleData>[
|
||||
ChartSampleData(x: 'HP Inc', y: 12.54, pointColor: Color.fromARGB(53, 92, 125, 1)),
|
||||
ChartSampleData(x: 'Lenovo', y: 13.46, pointColor: Color.fromARGB(192, 108, 132, 1)),
|
||||
ChartSampleData(x: 'Dell', y: 9.18, pointColor: Color.fromARGB(246, 114, 128, 1)),
|
||||
ChartSampleData(x: 'Apple', y: 4.56, pointColor: Color.fromARGB(248, 177, 149, 1)),
|
||||
ChartSampleData(x: 'Asus', y: 5.29, pointColor: Color.fromARGB(116, 180, 155, 1)),
|
||||
],
|
||||
width: 0.8,
|
||||
xValueMapper: (ChartSampleData sales, _) => sales.x as String,
|
||||
yValueMapper: (ChartSampleData sales, _) => sales.y,
|
||||
pointColorMapper: (ChartSampleData sales, _) => sales.pointColor,
|
||||
)
|
||||
],
|
||||
tooltipBehavior: controller.tooltipBehavior,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDashedSplineChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'Total investment (% of GDP)'),
|
||||
legend: Legend(isVisible: true, position: LegendPosition.bottom),
|
||||
primaryXAxis: NumericAxis(
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
interval: 1,
|
||||
),
|
||||
primaryYAxis: NumericAxis(
|
||||
minimum: 16,
|
||||
maximum: 28,
|
||||
interval: 4,
|
||||
labelFormat: '{value}%',
|
||||
axisLine: AxisLine(width: 0),
|
||||
),
|
||||
series: controller.getDashedSplineSeries(),
|
||||
tooltipBehavior: TooltipBehavior(enable: true),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAreaZoneChart() {
|
||||
final Orientation orientation = MediaQuery.of(context).orientation;
|
||||
final double containerSize = kIsWeb
|
||||
? 80
|
||||
: orientation == Orientation.portrait
|
||||
? 80
|
||||
: 45;
|
||||
final double fontSize = 14 / MediaQuery.of(context).textScaler.scale(1);
|
||||
final double size = 13 / MediaQuery.of(context).textScaler.scale(1);
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
legend: Legend(position: LegendPosition.bottom),
|
||||
title: ChartTitle(text: 'Average monthly temperature of US - 2020'),
|
||||
primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)),
|
||||
primaryYAxis:
|
||||
NumericAxis(labelFormat: '{value}°F', minimum: 0, maximum: 90, interval: 30, axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)),
|
||||
series: controller.getAreaZoneSeries(),
|
||||
tooltipBehavior: controller.areaTooltipBehavior,
|
||||
annotations: <CartesianChartAnnotation>[
|
||||
CartesianChartAnnotation(
|
||||
widget: SizedBox(
|
||||
height: containerSize,
|
||||
width: containerSize,
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Row(children: <Widget>[
|
||||
Icon(
|
||||
Icons.circle,
|
||||
color: Color.fromRGBO(116, 182, 194, 1),
|
||||
size: size,
|
||||
),
|
||||
Text(
|
||||
' Winter',
|
||||
style: TextStyle(fontSize: fontSize),
|
||||
),
|
||||
]),
|
||||
Row(children: <Widget>[
|
||||
Icon(Icons.circle, color: Color.fromRGBO(75, 189, 138, 1), size: size),
|
||||
Text(
|
||||
' Spring',
|
||||
style: TextStyle(fontSize: fontSize),
|
||||
)
|
||||
]),
|
||||
Row(children: <Widget>[
|
||||
Icon(Icons.circle, color: Color.fromRGBO(255, 186, 83, 1), size: size),
|
||||
Text(
|
||||
' Summer',
|
||||
style: TextStyle(fontSize: fontSize),
|
||||
)
|
||||
]),
|
||||
Row(children: <Widget>[
|
||||
Icon(Icons.circle, color: Color.fromRGBO(194, 110, 21, 1), size: size),
|
||||
Text(
|
||||
' Autumn',
|
||||
style: TextStyle(fontSize: fontSize),
|
||||
)
|
||||
]),
|
||||
],
|
||||
)),
|
||||
coordinateUnit: CoordinateUnit.percentage,
|
||||
x: kIsWeb ? '95%' : '85%',
|
||||
y: kIsWeb ? '21%' : '14%')
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDefaultBarChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'Tourism - Number of arrivals'),
|
||||
legend: Legend(isVisible: true, position: LegendPosition.bottom),
|
||||
primaryXAxis: CategoryAxis(
|
||||
majorGridLines: MajorGridLines(width: 0),
|
||||
),
|
||||
primaryYAxis: NumericAxis(majorGridLines: const MajorGridLines(width: 0), numberFormat: NumberFormat.compact()),
|
||||
series: controller.getDefaultBarSeries(),
|
||||
tooltipBehavior: TooltipBehavior(enable: true),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMultipleSeriesBubbleChart() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: SfCartesianChart(
|
||||
plotAreaBorderWidth: 0,
|
||||
title: ChartTitle(text: 'World countries details'),
|
||||
primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0), title: AxisTitle(text: 'Literacy rate'), minimum: 60, maximum: 100),
|
||||
primaryYAxis: NumericAxis(axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(width: 0), title: AxisTitle(text: 'GDP growth rate')),
|
||||
series: controller.getMultipleBubbleSeries(),
|
||||
legend: Legend(isVisible: true, overflowMode: LegendItemOverflowMode.wrap, position: LegendPosition.bottom),
|
||||
tooltipBehavior: controller.bubbleTooltipBehavior,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CustomColumnSeriesRenderer<T, D> extends ColumnSeriesRenderer<T, D> {
|
||||
_CustomColumnSeriesRenderer(this.themeData);
|
||||
|
||||
final ThemeData themeData;
|
||||
|
||||
@override
|
||||
ColumnSegment<T, D> createSegment() {
|
||||
return _ColumnCustomPainter(themeData);
|
||||
}
|
||||
}
|
||||
|
||||
class _ColumnCustomPainter<T, D> extends ColumnSegment<T, D> {
|
||||
_ColumnCustomPainter(this.themeData);
|
||||
|
||||
final ThemeData themeData;
|
||||
|
||||
List<Color> colorList = <Color>[
|
||||
Color.fromRGBO(53, 92, 125, 1),
|
||||
Color.fromRGBO(192, 108, 132, 1),
|
||||
Color.fromRGBO(246, 114, 128, 1),
|
||||
Color.fromRGBO(248, 177, 149, 1),
|
||||
Color.fromRGBO(116, 180, 155, 1)
|
||||
];
|
||||
List<Color> colorListM3Light = [
|
||||
Color.fromRGBO(6, 174, 224, 1),
|
||||
Color.fromRGBO(99, 85, 199, 1),
|
||||
Color.fromRGBO(49, 90, 116, 1),
|
||||
Color.fromRGBO(255, 180, 0, 1),
|
||||
Color.fromRGBO(150, 60, 112, 1)
|
||||
];
|
||||
List<Color> colorListM3Dark = [
|
||||
Color.fromRGBO(255, 245, 0, 1),
|
||||
Color.fromRGBO(51, 182, 119, 1),
|
||||
Color.fromRGBO(218, 150, 70, 1),
|
||||
Color.fromRGBO(201, 88, 142, 1),
|
||||
Color.fromRGBO(77, 170, 255, 1),
|
||||
];
|
||||
|
||||
@override
|
||||
Paint getFillPaint() {
|
||||
final Paint customerFillPaint = Paint();
|
||||
colorList = themeData.useMaterial3 ? (themeData.brightness == Brightness.light ? colorListM3Light : colorListM3Dark) : colorList;
|
||||
customerFillPaint.isAntiAlias = false;
|
||||
customerFillPaint.color = colorList[currentSegmentIndex];
|
||||
customerFillPaint.style = PaintingStyle.fill;
|
||||
return customerFillPaint;
|
||||
}
|
||||
|
||||
@override
|
||||
Paint getStrokePaint() {
|
||||
final Paint customerStrokePaint = Paint();
|
||||
customerStrokePaint.isAntiAlias = false;
|
||||
customerStrokePaint.color = Colors.transparent;
|
||||
customerStrokePaint.style = PaintingStyle.stroke;
|
||||
return customerStrokePaint;
|
||||
}
|
||||
|
||||
@override
|
||||
void onPaint(Canvas canvas) {
|
||||
if (segmentRect != null) {
|
||||
double x, y;
|
||||
x = segmentRect!.center.dx;
|
||||
y = segmentRect!.top;
|
||||
double width = 0;
|
||||
double height = 20;
|
||||
width = segmentRect!.width;
|
||||
final Paint paint = Paint();
|
||||
paint.color = getFillPaint().color;
|
||||
paint.style = PaintingStyle.fill;
|
||||
final Path path = Path();
|
||||
final double factor = segmentRect!.height * (1 - animationFactor);
|
||||
path.moveTo(x - width / 2, y + factor + height);
|
||||
path.lineTo(x, (segmentRect!.top + factor + height) - height);
|
||||
path.lineTo(x + width / 2, y + factor + height);
|
||||
path.lineTo(x + width / 2, segmentRect!.bottom + factor);
|
||||
path.lineTo(x - width / 2, segmentRect!.bottom + factor);
|
||||
path.close();
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,639 +0,0 @@
|
||||
import 'package:marco/controller/ui/buttons_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_button.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class ButtonsScreen extends StatefulWidget {
|
||||
const ButtonsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<ButtonsScreen> createState() => _ButtonsScreenState();
|
||||
}
|
||||
|
||||
class _ButtonsScreenState extends State<ButtonsScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late ButtonsController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = ButtonsController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'buttons_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("buttons", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Widgets'), MyBreadcrumbItem(name: 'buttons', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
wrapAlignment: WrapAlignment.start,
|
||||
wrapCrossAlignment: WrapCrossAlignment.start,
|
||||
children: [
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Elevated Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
elevatedBtn("Primary", contentTheme.primary),
|
||||
elevatedBtn("Secondary", contentTheme.secondary),
|
||||
elevatedBtn("Success", contentTheme.success),
|
||||
elevatedBtn("Warning", contentTheme.warning),
|
||||
elevatedBtn("Info", contentTheme.info),
|
||||
elevatedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Elevated Rounded Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
elevatedRoundedBtn("Primary", contentTheme.primary),
|
||||
elevatedRoundedBtn("Secondary", contentTheme.secondary),
|
||||
elevatedRoundedBtn("Success", contentTheme.success),
|
||||
elevatedRoundedBtn("Warning", contentTheme.warning),
|
||||
elevatedRoundedBtn("Info", contentTheme.info),
|
||||
elevatedRoundedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Flat Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
buildFlatButton("Primary", contentTheme.primary),
|
||||
buildFlatButton("Secondary", contentTheme.secondary),
|
||||
buildFlatButton("Success", contentTheme.success),
|
||||
buildFlatButton("Warning", contentTheme.warning),
|
||||
buildFlatButton("Info", contentTheme.info),
|
||||
buildFlatButton("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Rounded Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
roundedBtn("Primary", contentTheme.primary),
|
||||
roundedBtn("Secondary", contentTheme.secondary),
|
||||
roundedBtn("Success", contentTheme.success),
|
||||
roundedBtn("Warning", contentTheme.warning),
|
||||
roundedBtn("Info", contentTheme.info),
|
||||
roundedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Outline Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
outLinedBtn("Primary", contentTheme.primary),
|
||||
outLinedBtn("Secondary", contentTheme.secondary),
|
||||
outLinedBtn("Success", contentTheme.success),
|
||||
outLinedBtn("Warning", contentTheme.warning),
|
||||
outLinedBtn("Info", contentTheme.info),
|
||||
outLinedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Outline Rounded Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
outlinedRoundedBtn('Primary', contentTheme.primary),
|
||||
outlinedRoundedBtn('Secondary', contentTheme.secondary),
|
||||
outlinedRoundedBtn('Success', contentTheme.success),
|
||||
outlinedRoundedBtn('Warning', contentTheme.warning),
|
||||
outlinedRoundedBtn('Info', contentTheme.info),
|
||||
outlinedRoundedBtn('Danger', contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Soft Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
softBtn("Primary", contentTheme.primary),
|
||||
softBtn("Secondary", contentTheme.secondary),
|
||||
softBtn("Success", contentTheme.success),
|
||||
softBtn("Warning", contentTheme.warning),
|
||||
softBtn("Info", contentTheme.info),
|
||||
softBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Soft Rounded Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
softRoundedBtn("Primary", contentTheme.primary),
|
||||
softRoundedBtn("Secondary", contentTheme.secondary),
|
||||
softRoundedBtn("Success", contentTheme.success),
|
||||
softRoundedBtn("Warning", contentTheme.warning),
|
||||
softRoundedBtn("Info", contentTheme.info),
|
||||
softRoundedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Text Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
textBtn("Primary", contentTheme.primary),
|
||||
textBtn("Secondary", contentTheme.secondary),
|
||||
textBtn("Success", contentTheme.success),
|
||||
textBtn("Warning", contentTheme.warning),
|
||||
textBtn("Info", contentTheme.info),
|
||||
textBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Text Rounded Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
textRoundedBtn("Primary", contentTheme.primary),
|
||||
textRoundedBtn("Secondary", contentTheme.secondary),
|
||||
textRoundedBtn("Success", contentTheme.success),
|
||||
textRoundedBtn("Warning", contentTheme.warning),
|
||||
textRoundedBtn("Info", contentTheme.info),
|
||||
textRoundedBtn("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Sized Button', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 32),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
runAlignment: WrapAlignment.start,
|
||||
alignment: WrapAlignment.start,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.labelSmall('Small', color: contentTheme.onPrimary, fontWeight: 600),
|
||||
),
|
||||
MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall('Medium', color: contentTheme.onPrimary, fontWeight: 600),
|
||||
),
|
||||
MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(40, 24),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall('Large', color: contentTheme.onPrimary, fontWeight: 600),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20),
|
||||
child: MyText.titleMedium('Button Group', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 44),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: ToggleButtons(
|
||||
splashColor: contentTheme.primary.withAlpha(48),
|
||||
color: contentTheme.onBackground,
|
||||
fillColor: contentTheme.primary.withAlpha(32),
|
||||
selectedBorderColor: contentTheme.primary.withAlpha(48),
|
||||
isSelected: controller.selected,
|
||||
onPressed: controller.onSelect,
|
||||
children: <Widget>[
|
||||
Icon(Icons.wb_sunny_outlined, color: contentTheme.primary, size: 24),
|
||||
Icon(Icons.dark_mode_outlined, color: contentTheme.primary, size: 24),
|
||||
Icon(Icons.brightness_6_outlined, color: contentTheme.primary, size: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, bottom: 20),
|
||||
child: ToggleButtons(
|
||||
splashColor: contentTheme.primary.withAlpha(48),
|
||||
color: contentTheme.onBackground,
|
||||
fillColor: contentTheme.primary.withAlpha(32),
|
||||
selectedBorderColor: contentTheme.primary.withAlpha(48),
|
||||
isSelected: controller.selected,
|
||||
onPressed: controller.onSelect,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: MySpacing.x(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.wb_sunny_outlined, color: contentTheme.primary, size: 24),
|
||||
MySpacing.width(12),
|
||||
MyText.labelLarge('light', color: contentTheme.primary, fontWeight: 600)
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: MySpacing.x(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.dark_mode_outlined, color: contentTheme.primary, size: 24),
|
||||
MySpacing.width(12),
|
||||
MyText.labelLarge('dark', color: contentTheme.primary, fontWeight: 600)
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: MySpacing.x(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.brightness_6_outlined, color: contentTheme.primary, size: 24),
|
||||
MySpacing.width(12),
|
||||
MyText.labelLarge('system', color: contentTheme.primary, fontWeight: 600)
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget elevatedBtn(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 2,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: color,
|
||||
child: MyText.bodySmall(btnName, color: contentTheme.onPrimary, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget elevatedRoundedBtn(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 2,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: color,
|
||||
borderRadiusAll: 20,
|
||||
child: MyText.bodySmall(btnName, color: contentTheme.onPrimary, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildFlatButton(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: color,
|
||||
child: MyText.bodySmall(btnName, color: contentTheme.onPrimary, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget roundedBtn(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: color,
|
||||
borderRadiusAll: 20,
|
||||
child: MyText.bodySmall(btnName, color: contentTheme.onPrimary, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget outLinedBtn(String btnName, Color color) {
|
||||
return MyButton.outlined(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
borderColor: color,
|
||||
splashColor: color.withValues(alpha:0.1),
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget outlinedRoundedBtn(String btnName, Color color) {
|
||||
return MyButton.outlined(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
borderColor: color,
|
||||
splashColor: color.withValues(alpha:0.1),
|
||||
borderRadiusAll: 20,
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget softBtn(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
borderColor: color,
|
||||
backgroundColor: color.withValues(alpha:0.12),
|
||||
splashColor: color.withValues(alpha:0.2),
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget softRoundedBtn(String btnName, Color color) {
|
||||
return MyButton(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
borderColor: color,
|
||||
backgroundColor: color.withValues(alpha:0.12),
|
||||
splashColor: color.withValues(alpha:0.2),
|
||||
borderRadiusAll: 20,
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget textBtn(String btnName, Color color) {
|
||||
return MyButton.text(
|
||||
onPressed: () {},
|
||||
padding: MySpacing.xy(20, 16),
|
||||
splashColor: color.withValues(alpha:0.1),
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
|
||||
Widget textRoundedBtn(String btnName, Color color) {
|
||||
return MyButton.text(
|
||||
onPressed: () {},
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
splashColor: color.withValues(alpha:0.1),
|
||||
borderRadiusAll: 20,
|
||||
child: MyText.bodySmall(btnName, color: color, fontWeight: 600),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,303 +0,0 @@
|
||||
import 'package:carousel_slider/carousel_slider.dart';
|
||||
import 'package:marco/controller/ui/carousels_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/images.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get_state_manager/get_state_manager.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class CarouselsScreen extends StatefulWidget {
|
||||
const CarouselsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<CarouselsScreen> createState() => _CarouselsScreenState();
|
||||
}
|
||||
|
||||
class _CarouselsScreenState extends State<CarouselsScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late CarouselsController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = CarouselsController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Carousal", fontSize: 18, fontWeight: 600),
|
||||
MyBreadcrumb(
|
||||
children: [MyBreadcrumbItem(name: 'Widgets'), MyBreadcrumbItem(name: 'Carousal', active: true)],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
wrapAlignment: WrapAlignment.start,
|
||||
wrapCrossAlignment: WrapCrossAlignment.start,
|
||||
children: [
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [MyText.titleMedium('Simple', fontWeight: 600), MySpacing.height(20), simpleCarousel()],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [MyText.titleMedium('Animated', fontWeight: 600), MySpacing.height(20), animatedCarousel()],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: "lg-6 md-12",
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium('Animated With Arrow', fontWeight: 600),
|
||||
Spacer(),
|
||||
MyContainer(
|
||||
color: contentTheme.primary.withAlpha(32),
|
||||
padding: MySpacing.xy(20, 8),
|
||||
onTap: () => controller.onChangePreview(),
|
||||
child: Icon(
|
||||
LucideIcons.arrow_left,
|
||||
color: contentTheme.primary,
|
||||
),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
MyContainer(
|
||||
color: contentTheme.primary.withAlpha(32),
|
||||
padding: MySpacing.xy(20, 8),
|
||||
onTap: () => controller.onChangeNext(),
|
||||
child: Icon(LucideIcons.arrow_right, color: contentTheme.primary),
|
||||
)
|
||||
],
|
||||
),
|
||||
MySpacing.height(16),
|
||||
carouselSlider(),
|
||||
],
|
||||
),
|
||||
)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget indicator(bool isActive) {
|
||||
return AnimatedContainer(
|
||||
duration: Duration(milliseconds: 300),
|
||||
curve: Curves.easeInToLinear,
|
||||
margin: EdgeInsets.symmetric(horizontal: 4.0),
|
||||
height: 8.0,
|
||||
width: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: isActive ? Colors.white : Colors.white.withAlpha(140),
|
||||
borderRadius: BorderRadius.all(Radius.circular(4)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget simpleCarousel() {
|
||||
List<Widget> buildPageIndicatorStatic() {
|
||||
List<Widget> list = [];
|
||||
for (int i = 0; i < controller.simpleCarouselSize; i++) {
|
||||
list.add(i == controller.selectedSimpleCarousel ? indicator(true) : indicator(false));
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
return Stack(
|
||||
alignment: AlignmentDirectional.center,
|
||||
children: <Widget>[
|
||||
SizedBox(
|
||||
height: 300,
|
||||
child: PageView(
|
||||
pageSnapping: true,
|
||||
scrollBehavior: AppScrollBehavior(),
|
||||
physics: ClampingScrollPhysics(),
|
||||
controller: controller.simplePageController,
|
||||
onPageChanged: controller.onChangeSimpleCarousel,
|
||||
children: <Widget>[
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 10,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: buildPageIndicatorStatic(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget animatedCarousel() {
|
||||
List<Widget> buildPageIndicatorStatic() {
|
||||
List<Widget> list = [];
|
||||
for (int i = 0; i < controller.animatedCarouselSize; i++) {
|
||||
list.add(i == controller.selectedAnimatedCarousel ? indicator(true) : indicator(false));
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
return Stack(
|
||||
alignment: AlignmentDirectional.center,
|
||||
children: <Widget>[
|
||||
SizedBox(
|
||||
height: 300,
|
||||
child: PageView(
|
||||
pageSnapping: true,
|
||||
scrollBehavior: AppScrollBehavior(),
|
||||
physics: ClampingScrollPhysics(),
|
||||
controller: controller.animatedPageController,
|
||||
onPageChanged: controller.onChangeAnimatedCarousel,
|
||||
children: <Widget>[
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
MyContainer(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
paddingAll: 0,
|
||||
child: Image.asset(
|
||||
Images.authBackground,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 10,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: buildPageIndicatorStatic(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget carouselSlider() {
|
||||
Widget carouselImage(String image) {
|
||||
return MyContainer(clipBehavior: Clip.antiAliasWithSaveLayer, width: double.infinity, paddingAll: 0, child: Image.asset(image, fit: BoxFit.cover));
|
||||
}
|
||||
|
||||
return CarouselSlider(
|
||||
items: [
|
||||
carouselImage(Images.dummy[1]),
|
||||
carouselImage(Images.dummy[2]),
|
||||
carouselImage(Images.dummy[3]),
|
||||
carouselImage(Images.dummy[4]),
|
||||
carouselImage(Images.dummy[0]),
|
||||
],
|
||||
carouselController: controller.carouselController,
|
||||
options: CarouselOptions(
|
||||
height: 300,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
enlargeCenterPage: true,
|
||||
autoPlay: true,
|
||||
autoPlayCurve: Curves.decelerate,
|
||||
enableInfiniteScroll: true,
|
||||
autoPlayAnimationDuration: Duration(milliseconds: 1200),
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
class AppScrollBehavior extends MaterialScrollBehavior {
|
||||
@override
|
||||
Set<PointerDeviceKind> get dragDevices => {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
};
|
||||
}
|
||||
@ -1,769 +0,0 @@
|
||||
import 'package:marco/controller/ui/dialogs_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_button.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class DialogsScreen extends StatefulWidget {
|
||||
const DialogsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<DialogsScreen> createState() => _DialogsScreenState();
|
||||
}
|
||||
|
||||
class _DialogsScreenState extends State<DialogsScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late DialogsController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = DialogsController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'dialogs_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Dialogs",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Dialogs', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(children: [
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: alertBox()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: standardBox()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: fullWidget()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: leftPosition()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: rightPosition()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: topPosition()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: bottomPosition()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: staticBox()),
|
||||
])),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget alertBox() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
MyText.titleMedium("Alert Box", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall("Simple default Alert Example", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyButton(
|
||||
onPressed: _showAlertDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall('Alert', fontWeight: 600, color: contentTheme.onPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget standardBox() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Standard Box", fontWeight: 600),
|
||||
MyText.bodySmall("Alert with Header and Footer buttons", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showStandardDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.success,
|
||||
child: MyText.bodySmall('Standard', fontWeight: 600, color: contentTheme.onSuccess),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget fullWidget() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Full Widget", fontWeight: 600),
|
||||
MyText.bodySmall("Alert with full width covers most of the screen", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showFullWidthDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.warning,
|
||||
child: MyText.bodySmall('Full Width', fontWeight: 600, color: contentTheme.onWarning),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget leftPosition() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Left Position", fontWeight: 600),
|
||||
MyText.bodySmall("Left Positioned Alert", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showLeftDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall('Left', fontWeight: 600, color: contentTheme.onPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget rightPosition() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Right Position", fontWeight: 600),
|
||||
MyText.bodySmall("Right Positioned Alert", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showRightDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.warning,
|
||||
child: MyText.bodySmall('Right', fontWeight: 600, color: contentTheme.onWarning),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget topPosition() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Top Position", fontWeight: 600),
|
||||
MyText.bodySmall("Top Positioned Alert", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showTopDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.success,
|
||||
child: MyText.bodySmall('Top', fontWeight: 600, color: contentTheme.onSuccess),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget bottomPosition() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Bottom Position", fontWeight: 600),
|
||||
MyText.bodySmall("Bottom Positioned Alert", fontWeight: 600),
|
||||
MyButton(
|
||||
onPressed: _showBottomDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.info,
|
||||
child: MyText.bodySmall(
|
||||
'Bottom',
|
||||
fontWeight: 600,
|
||||
color: contentTheme.onInfo,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget staticBox() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Static", fontWeight: 600),
|
||||
MyText.bodySmall("Static Positioned Alert which doesn't close when backdrop is tapped/clicked", fontWeight: 600, textAlign: TextAlign.center),
|
||||
MyButton(
|
||||
onPressed: _showStaticDialog,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(24, 20),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall('Static', fontWeight: 600, color: contentTheme.onPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showAlertDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return AlertDialog(
|
||||
actionsPadding: MySpacing.only(bottom: 16, right: 23),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
title: MyText.labelLarge("confirmation?"),
|
||||
content: MyText.bodySmall("Are you sure, you want to delete history?", fontWeight: 600),
|
||||
actions: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showStandardDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
child: SizedBox(
|
||||
width: 400,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Dialog Title', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showFullWidthDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Dialog Title', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showRightDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
insetPadding: MySpacing.fromLTRB(MediaQuery.of(context).size.width - 350, 0, 0, 0),
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Right Dialog', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(
|
||||
controller.dummyTexts[2],
|
||||
fontWeight: 600,
|
||||
maxLines: 6,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.only(right: 20, bottom: 12, top: 14),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showBottomDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
insetPadding: MySpacing.fromLTRB(0, MediaQuery.of(context).size.height - 350, 0, 0),
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Bottom Dialog', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(
|
||||
controller.dummyTexts[3],
|
||||
maxLines: 6,
|
||||
fontWeight: 600,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.only(right: 20, bottom: 12, top: 14),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showTopDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
insetPadding: MySpacing.fromLTRB(0, 0, 0, MediaQuery.of(context).size.height - 350),
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Top Dialog', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(
|
||||
controller.dummyTexts[4],
|
||||
fontWeight: 600,
|
||||
maxLines: 6,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.only(right: 20, bottom: 12, top: 14),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showLeftDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
insetPadding: MySpacing.fromLTRB(0, 0, MediaQuery.of(context).size.width - 350, 0),
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.labelLarge('Left Dialog', fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(
|
||||
controller.dummyTexts[5],
|
||||
fontWeight: 600,
|
||||
maxLines: 6,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.only(right: 20, bottom: 12, top: 14),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
void _showStaticDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
barrierDismissible: false,
|
||||
builder: (_) {
|
||||
return Dialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
child: SizedBox(
|
||||
width: 400,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: MyText.labelLarge('Static Dialog', fontWeight: 600)),
|
||||
InkWell(
|
||||
onTap: () => Navigator.pop(context),
|
||||
child: Icon(
|
||||
LucideIcons.x,
|
||||
size: 20,
|
||||
color: colorScheme.onSurface.withValues(alpha:0.5),
|
||||
))
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.all(16),
|
||||
child: MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600),
|
||||
),
|
||||
Divider(height: 0, thickness: 1),
|
||||
Padding(
|
||||
padding: MySpacing.only(right: 20, bottom: 12, top: 14),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.secondaryContainer,
|
||||
child: MyText.labelMedium(
|
||||
"Close",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
MySpacing.width(16),
|
||||
MyButton(
|
||||
onPressed: () => Get.back(),
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: MyText.labelMedium(
|
||||
"Save",
|
||||
fontWeight: 600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,103 +0,0 @@
|
||||
import 'package:marco/controller/ui/drag_n_drop_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:reorderable_grid/reorderable_grid.dart';
|
||||
|
||||
class DragNDropScreen extends StatefulWidget {
|
||||
const DragNDropScreen({super.key});
|
||||
|
||||
@override
|
||||
State<DragNDropScreen> createState() => _DragNDropScreenState();
|
||||
}
|
||||
|
||||
class _DragNDropScreenState extends State<DragNDropScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late DragNDropController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = Get.put(DragNDropController());
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'drag_n_drop_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Drag & Drop",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Drag & Drop', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
if (controller.dragNDrop.isNotEmpty)
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: SizedBox(
|
||||
height: 700,
|
||||
child: ReorderableGridView.extent(
|
||||
maxCrossAxisExtent: 250,
|
||||
onReorder: controller.onReorder,
|
||||
crossAxisSpacing: 24,
|
||||
mainAxisSpacing: 24,
|
||||
childAspectRatio: 0.82,
|
||||
children: controller.dragNDrop.map((data) {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
key: ValueKey(data.id),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyContainer(
|
||||
paddingAll: 0,
|
||||
child: Image.asset(data.image, fit: BoxFit.cover),
|
||||
),
|
||||
Text(data.name),
|
||||
Text(data.userName),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,432 +0,0 @@
|
||||
import 'package:marco/controller/ui/loaders_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:loading_animation_widget/loading_animation_widget.dart';
|
||||
|
||||
class LoadersScreen extends StatefulWidget {
|
||||
const LoadersScreen({super.key});
|
||||
|
||||
@override
|
||||
State<LoadersScreen> createState() => _LoadersScreenState();
|
||||
}
|
||||
|
||||
class _LoadersScreenState extends State<LoadersScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late LoadersController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = LoadersController();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'loaders_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Loader",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Loader', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: simpleLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: waveDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: inkDropLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: twistingDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: threeRotatingDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: staggeredDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: fourRotatingDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: fallingDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: progressiveDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: discreteCircularLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: threeArchedCircleLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: bouncingBallLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: flickrLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: hexagonDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: beatLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: twoRotatingArcLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: newtonCradleLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: stretchedDotsLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: halfTriangleDotLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: dotsTriangleLoader()),
|
||||
MyFlexItem(sizes: 'lg-3 md-6', child: horizontalRotatingLoader()),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget horizontalRotatingLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Horizontal Rotating Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.horizontalRotatingDots(size: 40, color: contentTheme.primary),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget flickrLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Flickr Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.flickr(size: 40, leftDotColor: contentTheme.secondary, rightDotColor: contentTheme.primary),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget dotsTriangleLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("DotsTriangle Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.dotsTriangle(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget halfTriangleDotLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Half TriangleDot Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.halfTriangleDot(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget stretchedDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("StretchedDots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.stretchedDots(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget newtonCradleLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("NewtonCradle Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.newtonCradle(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget twoRotatingArcLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Two RotatingArc Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.twoRotatingArc(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget beatLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Beat Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.beat(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget hexagonDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Hexagon Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.hexagonDots(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget bouncingBallLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Bouncing Ball Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.bouncingBall(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget threeArchedCircleLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Three Arched Circle Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.threeArchedCircle(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget discreteCircularLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Discrete Circular Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.discreteCircle(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget progressiveDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Progressive Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.progressiveDots(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget fallingDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Falling Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.fallingDot(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget fourRotatingDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Four Rotating Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.fourRotatingDots(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget staggeredDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("staggered Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.staggeredDotsWave(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget threeRotatingDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("ThreeRotating Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.threeRotatingDots(color: contentTheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget twistingDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Twisting Dots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.twistingDots(rightDotColor: contentTheme.primary, leftDotColor: contentTheme.secondary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget simpleLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Simple Loader", fontWeight: 600),
|
||||
CircularProgressIndicator(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget waveDotsLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("WaveDots Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.waveDots(color: theme.colorScheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget inkDropLoader() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
MyText.titleMedium("Ink Drop Loader", fontWeight: 600),
|
||||
LoadingAnimationWidget.inkDrop(color: theme.colorScheme.primary, size: 40),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,340 +0,0 @@
|
||||
import 'package:marco/controller/ui/modal_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_button.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class ModalScreen extends StatefulWidget {
|
||||
const ModalScreen({super.key});
|
||||
|
||||
@override
|
||||
State<ModalScreen> createState() => _ModalScreenState();
|
||||
}
|
||||
|
||||
class _ModalScreenState extends State<ModalScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late ModalController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = ModalController(this);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'modal_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Modal",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Modal', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium("Show Modal", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall("Simple default Alert Example", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
Center(
|
||||
child: MyButton(
|
||||
elevation: 0,
|
||||
onPressed: () => _showDialog(),
|
||||
child: MyText.bodyMedium("Show Modal", color: contentTheme.onPrimary),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium("Modal with button", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall("Small default styled Modal", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyButton(
|
||||
elevation: 0,
|
||||
onPressed: () => _dialogButton(),
|
||||
child: MyText.bodyMedium("Modal With Button", color: contentTheme.onPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium("Large Modal", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall("Large default styled modal with buttons", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyButton(
|
||||
elevation: 0,
|
||||
onPressed: () => _largeModal(),
|
||||
child: MyText.bodyMedium("Large Modal", color: contentTheme.onPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.titleMedium("Animation Modal", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyText.bodySmall("Animated Modal with starting and ending animation", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
MyButton(
|
||||
elevation: 0,
|
||||
onPressed: () => _openCustomDialog(),
|
||||
child: MyText.bodyMedium("Animation Modal", color: contentTheme.onPrimary)),
|
||||
],
|
||||
),
|
||||
)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _openCustomDialog() {
|
||||
showGeneralDialog(
|
||||
transitionBuilder: (context, a1, a2, widget) {
|
||||
return Transform.scale(
|
||||
scale: a1.value,
|
||||
child: Opacity(
|
||||
opacity: a1.value,
|
||||
child: AlertDialog(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
title: MyText.bodyMedium('Hello!!', fontWeight: 600),
|
||||
content: SizedBox(width: 300, child: MyText.labelMedium(controller.dummyTexts[9]))),
|
||||
),
|
||||
);
|
||||
},
|
||||
transitionDuration: Duration(milliseconds: 200),
|
||||
barrierDismissible: true,
|
||||
barrierLabel: '',
|
||||
context: context,
|
||||
pageBuilder: (context, animation1, animation2) => MyContainer());
|
||||
}
|
||||
|
||||
void _largeModal() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return Dialog(
|
||||
alignment: Alignment.topCenter,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: .5,
|
||||
insetPadding: MySpacing.xy(100, 40),
|
||||
insetAnimationCurve: Curves.easeInBack,
|
||||
insetAnimationDuration: Durations.short1,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.nBottom(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Large Modal", fontWeight: 600),
|
||||
InkWell(onTap: () => Get.back(), child: Icon(LucideIcons.x, size: 16)),
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(height: 40),
|
||||
Padding(
|
||||
padding: MySpacing.nTop(28),
|
||||
child: Column(
|
||||
children: [
|
||||
MyText.labelMedium(controller.dummyTexts[2], fontWeight: 600, overflow: TextOverflow.ellipsis, maxLines: 6),
|
||||
MySpacing.height(8),
|
||||
MyText.labelMedium(controller.dummyTexts[3], fontWeight: 600, overflow: TextOverflow.ellipsis, maxLines: 6),
|
||||
MySpacing.height(8),
|
||||
MyText.labelMedium(controller.dummyTexts[4], fontWeight: 600, overflow: TextOverflow.ellipsis, maxLines: 6),
|
||||
MySpacing.height(8),
|
||||
MyText.labelMedium(controller.dummyTexts[5], fontWeight: 600, overflow: TextOverflow.ellipsis, maxLines: 6),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _dialogButton() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return Dialog(
|
||||
alignment: Alignment.topCenter,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: .5,
|
||||
insetAnimationCurve: Curves.easeInBack,
|
||||
insetAnimationDuration: Durations.short1,
|
||||
child: SizedBox(
|
||||
width: 400,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.nBottom(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Modal With Button", fontWeight: 600),
|
||||
InkWell(onTap: () => Get.back(), child: Icon(LucideIcons.x, size: 16))
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(height: 40),
|
||||
Padding(
|
||||
padding: MySpacing.x(20),
|
||||
child: MyText.labelMedium(controller.dummyTexts[2], overflow: TextOverflow.ellipsis, maxLines: 6, letterSpacing: 1),
|
||||
),
|
||||
Divider(height: 40),
|
||||
Padding(
|
||||
padding: MySpacing.nTop(20),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: MyButton.block(
|
||||
elevation: 0,
|
||||
borderRadiusAll: 0,
|
||||
padding: MySpacing.all(20),
|
||||
onPressed: () => Get.back(),
|
||||
backgroundColor: contentTheme.secondary,
|
||||
child: MyText.bodyMedium(
|
||||
"Close",
|
||||
color: contentTheme.onDisabled,
|
||||
fontWeight: 600,
|
||||
)),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
Expanded(
|
||||
child: MyButton.block(
|
||||
elevation: 0,
|
||||
borderRadiusAll: 0,
|
||||
padding: MySpacing.all(20),
|
||||
backgroundColor: contentTheme.primary,
|
||||
onPressed: () => Get.back(),
|
||||
child: MyText.bodyMedium(
|
||||
"Save",
|
||||
color: contentTheme.onPrimary,
|
||||
fontWeight: 600,
|
||||
)),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _showDialog() {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return Dialog(
|
||||
alignment: Alignment.topCenter,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: .5,
|
||||
insetAnimationCurve: Curves.easeInBack,
|
||||
insetAnimationDuration: Durations.short1,
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.nBottom(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium("Simple Modal", fontWeight: 600),
|
||||
InkWell(onTap: () => Get.back(), child: Icon(LucideIcons.x, size: 16)),
|
||||
],
|
||||
),
|
||||
),
|
||||
Divider(height: 30),
|
||||
Padding(
|
||||
padding: MySpacing.nTop(20),
|
||||
child: MyText.labelMedium(controller.dummyTexts[2]),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,320 +0,0 @@
|
||||
import 'package:marco/controller/ui/notification_controller.dart';
|
||||
import 'package:marco/helpers/theme/admin_theme.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_button.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/helpers/widgets/my_text_style.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class NotificationScreen extends StatefulWidget {
|
||||
const NotificationScreen({super.key});
|
||||
|
||||
@override
|
||||
State<NotificationScreen> createState() => _NotificationScreenState();
|
||||
}
|
||||
|
||||
class _NotificationScreenState extends State<NotificationScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late NotificationController controller;
|
||||
@override
|
||||
late OutlineInputBorder outlineInputBorder;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = NotificationController(this);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'notification_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Notifications",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Notifications', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(
|
||||
sizes: 'lg-6',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 0,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 20, bottom: 8, right: 23),
|
||||
child: MyText.titleMedium("${controller.showBanner ? "${"Banner"}" : "${"Toast"}"} Customizer", fontWeight: 600),
|
||||
),
|
||||
Divider(height: 24),
|
||||
Padding(
|
||||
padding: MySpacing.only(left: 23, top: 8, bottom: 23, right: 23),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Wrap(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
spacing: 16,
|
||||
runSpacing: 16,
|
||||
children: [
|
||||
buildMessageType(),
|
||||
buildColorVariation(),
|
||||
if (!controller.showBanner) buildFloatingType(),
|
||||
],
|
||||
),
|
||||
MySpacing.height(12),
|
||||
MyText.bodyMedium("Title Text", fontWeight: 600),
|
||||
MySpacing.height(8),
|
||||
TextFormField(
|
||||
controller: controller.toastTitleController,
|
||||
decoration: InputDecoration(
|
||||
labelText: "Toast Text",
|
||||
filled: true,
|
||||
contentPadding: MySpacing.all(16),
|
||||
isCollapsed: true,
|
||||
floatingLabelBehavior: FloatingLabelBehavior.never),
|
||||
),
|
||||
MySpacing.height(12),
|
||||
buildAction(),
|
||||
MySpacing.height(12),
|
||||
buildTimeOut(),
|
||||
Center(
|
||||
child: MyButton(
|
||||
onPressed: controller.show,
|
||||
elevation: 0,
|
||||
padding: MySpacing.xy(20, 16),
|
||||
backgroundColor: contentTheme.primary,
|
||||
child: MyText.bodySmall(
|
||||
'Show',
|
||||
color: contentTheme.onPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildTimeOut() {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.bodyMedium("Timeout", fontWeight: 600),
|
||||
SwitchListTile(
|
||||
value: controller.sticky,
|
||||
onChanged: controller.onChangeSticky,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
visualDensity: getCompactDensity,
|
||||
contentPadding: MySpacing.zero,
|
||||
dense: true,
|
||||
title: MyText.bodyMedium("${"Infinite"} (∞)", fontWeight: 600)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildAction() {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.bodyMedium("Actions", fontWeight: 600),
|
||||
MySpacing.height(8),
|
||||
Theme(
|
||||
data: ThemeData(unselectedWidgetColor: contentTheme.light),
|
||||
child: CheckboxListTile(
|
||||
value: controller.showCloseIcon,
|
||||
onChanged: controller.onChangeShowCloseIcon,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
visualDensity: getCompactDensity,
|
||||
contentPadding: MySpacing.zero,
|
||||
activeColor: contentTheme.primary,
|
||||
dense: true,
|
||||
title: MyText.bodyMedium("Show Close Icon", fontWeight: 600)),
|
||||
),
|
||||
Theme(
|
||||
data: ThemeData(unselectedWidgetColor: contentTheme.light),
|
||||
child: CheckboxListTile(
|
||||
value: controller.showBanner ? controller.showLeadingIcon : controller.showOkAction,
|
||||
onChanged: controller.onAction,
|
||||
activeColor: contentTheme.primary,
|
||||
controlAffinity: ListTileControlAffinity.leading,
|
||||
visualDensity: getCompactDensity,
|
||||
contentPadding: MySpacing.zero,
|
||||
dense: true,
|
||||
title: MyText.bodyMedium(
|
||||
controller.showBanner ? "Show Leading Icon" : "Show ok Action",
|
||||
fontWeight: 600,
|
||||
)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildFloatingType() {
|
||||
return SizedBox(
|
||||
width: 150,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.bodyMedium("Floating Type", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
DropdownButtonFormField<SnackBarBehavior>(
|
||||
value: controller.selectedBehavior,
|
||||
decoration: InputDecoration(
|
||||
hintText: "Select Type",
|
||||
hintStyle: MyTextStyle.bodyMedium(),
|
||||
contentPadding: MySpacing.all(12),
|
||||
isCollapsed: true,
|
||||
filled: true,
|
||||
floatingLabelBehavior: FloatingLabelBehavior.never,
|
||||
),
|
||||
dropdownColor: contentTheme.background,
|
||||
onChanged: (SnackBarBehavior? newValue) {
|
||||
if (newValue != null) {
|
||||
controller.onChangeBehavior(newValue);
|
||||
}
|
||||
},
|
||||
items: SnackBarBehavior.values.map<DropdownMenuItem<SnackBarBehavior>>(
|
||||
(SnackBarBehavior behavior) {
|
||||
return DropdownMenuItem<SnackBarBehavior>(
|
||||
value: behavior,
|
||||
child: InkWell(
|
||||
onTap: () => controller.onChangeBehavior(behavior),
|
||||
child: MyText.labelMedium(behavior.name.capitalize!),
|
||||
),
|
||||
);
|
||||
},
|
||||
).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildColorVariation() {
|
||||
return SizedBox(
|
||||
width: 150,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.bodyMedium("Color variation", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
DropdownButtonFormField<ContentThemeColor>(
|
||||
dropdownColor: contentTheme.background,
|
||||
value: controller.selectedColor,
|
||||
onChanged: controller.onChangeColor,
|
||||
decoration: InputDecoration(
|
||||
hintText: "Select Type",
|
||||
hintStyle: MyTextStyle.bodyMedium(),
|
||||
contentPadding: MySpacing.all(12),
|
||||
isCollapsed: true,
|
||||
filled: true,
|
||||
floatingLabelBehavior: FloatingLabelBehavior.never,
|
||||
),
|
||||
items: ContentThemeColor.values.map((color) {
|
||||
return DropdownMenuItem<ContentThemeColor>(
|
||||
value: color,
|
||||
child: InkWell(
|
||||
onTap: () => controller.onChangeColor(color),
|
||||
child: MyText.labelMedium(
|
||||
color.name.capitalize!,
|
||||
fontWeight: 600,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildMessageType() {
|
||||
return SizedBox(
|
||||
width: 150,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.bodyMedium("Message Type", fontWeight: 600),
|
||||
MySpacing.height(12),
|
||||
DropdownButtonFormField<bool>(
|
||||
value: controller.showBanner,
|
||||
decoration: InputDecoration(
|
||||
hintText: "Select Type",
|
||||
hintStyle: MyTextStyle.bodyMedium(),
|
||||
contentPadding: MySpacing.all(12),
|
||||
isCollapsed: true,
|
||||
filled: true,
|
||||
floatingLabelBehavior: FloatingLabelBehavior.never,
|
||||
),
|
||||
dropdownColor: contentTheme.background,
|
||||
onChanged: (bool? newValue) {
|
||||
controller.setBannerType(newValue!);
|
||||
},
|
||||
items: [
|
||||
DropdownMenuItem<bool>(
|
||||
value: false,
|
||||
child: InkWell(
|
||||
onTap: () => controller.setBannerType(false),
|
||||
child: MyText.labelMedium("Toast"),
|
||||
),
|
||||
),
|
||||
DropdownMenuItem<bool>(
|
||||
value: true,
|
||||
child: InkWell(onTap: () => controller.setBannerType(true), child: MyText.labelMedium("Banner")),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,358 +0,0 @@
|
||||
import 'package:marco/controller/ui/tabs_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_tab_indicator_style.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
|
||||
class TabsScreen extends StatefulWidget {
|
||||
const TabsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<TabsScreen> createState() => _TabsScreenState();
|
||||
}
|
||||
|
||||
class _TabsScreenState extends State<TabsScreen> with TickerProviderStateMixin, UIMixin {
|
||||
late TabsController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = TabsController(this);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'tabs_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Tabs",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Tabs', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
wrapAlignment: WrapAlignment.start,
|
||||
wrapCrossAlignment: WrapCrossAlignment.start,
|
||||
children: [
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: defaultTabs()),
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: fullWidth()),
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: backgroundIndicator()),
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: borderIndicator()),
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: softIndicator()),
|
||||
MyFlexItem(sizes: "lg-6 md-12", child: customIndicator1()),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget defaultTabs() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Default Tabs", fontWeight: 600),
|
||||
TabBar(
|
||||
controller: controller.defaultTabController,
|
||||
isScrollable: true,
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.defaultIndex == 0 ? 600 : 500, color: controller.defaultIndex == 0 ? contentTheme.primary : null)),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.defaultIndex == 1 ? 600 : 500, color: controller.defaultIndex == 1 ? contentTheme.primary : null)),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.defaultIndex == 2 ? 600 : 500, color: controller.defaultIndex == 2 ? contentTheme.primary : null)),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.defaultTabController,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
Widget fullWidth() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Full Width", fontWeight: 600),
|
||||
TabBar(
|
||||
controller: controller.fullWidthTabController,
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.fullWidthIndex == 0 ? 600 : 500, color: controller.fullWidthIndex == 0 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.fullWidthIndex == 1 ? 600 : 500, color: controller.fullWidthIndex == 1 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.fullWidthIndex == 2 ? 600 : 500, color: controller.fullWidthIndex == 2 ? contentTheme.primary : null),
|
||||
),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.fullWidthTabController,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
Widget backgroundIndicator() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Background Indicator", fontWeight: 600),
|
||||
MySpacing.height(20),
|
||||
TabBar(
|
||||
controller: controller.backgroundTabController,
|
||||
isScrollable: true,
|
||||
indicator: BoxDecoration(borderRadius: BorderRadius.circular(8), color: contentTheme.primary),
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.backgroundIndex == 0 ? 600 : 500, color: controller.backgroundIndex == 0 ? contentTheme.onPrimary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.backgroundIndex == 1 ? 600 : 500, color: controller.backgroundIndex == 1 ? contentTheme.onPrimary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.backgroundIndex == 2 ? 600 : 500, color: controller.backgroundIndex == 2 ? contentTheme.onPrimary : null),
|
||||
),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.backgroundTabController,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
Widget borderIndicator() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Bordered Indicator", fontWeight: 600),
|
||||
MySpacing.height(28),
|
||||
TabBar(
|
||||
controller: controller.borderedTabController,
|
||||
isScrollable: true,
|
||||
indicator: BoxDecoration(borderRadius: BorderRadius.circular(8), border: Border.all(color: contentTheme.primary, width: 1.2)),
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.borderedIndex == 0 ? 600 : 500, color: controller.borderedIndex == 0 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.borderedIndex == 1 ? 600 : 500, color: controller.borderedIndex == 1 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.borderedIndex == 2 ? 600 : 500, color: controller.borderedIndex == 2 ? contentTheme.primary : null),
|
||||
),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.borderedTabController,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
Widget softIndicator() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Soft Indicator", fontWeight: 600),
|
||||
MySpacing.height(20),
|
||||
TabBar(
|
||||
controller: controller.softTabController,
|
||||
isScrollable: true,
|
||||
indicator: BoxDecoration(borderRadius: BorderRadius.circular(8), color: contentTheme.primary.withAlpha(40)),
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.softIndex == 0 ? 600 : 500, color: controller.softIndex == 0 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.softIndex == 1 ? 600 : 500, color: controller.softIndex == 1 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.softIndex == 2 ? 600 : 500, color: controller.softIndex == 2 ? contentTheme.primary : null),
|
||||
),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.softTabController,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
Widget customIndicator1() {
|
||||
return MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha:.2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
height: 250,
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Custom Indicator #1", fontWeight: 600),
|
||||
MySpacing.height(28),
|
||||
TabBar(
|
||||
controller: controller.customTabController1,
|
||||
isScrollable: true,
|
||||
indicator: MyTabIndicator(indicatorColor: contentTheme.primary, indicatorStyle: MyTabIndicatorStyle.rectangle, yOffset: 40),
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Home",
|
||||
fontWeight: controller.customIndex1 == 0 ? 600 : 500, color: controller.customIndex1 == 0 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Profile",
|
||||
fontWeight: controller.customIndex1 == 1 ? 600 : 500, color: controller.customIndex1 == 1 ? contentTheme.primary : null),
|
||||
),
|
||||
Tab(
|
||||
icon: MyText.bodyMedium("Messages",
|
||||
fontWeight: controller.customIndex1 == 2 ? 600 : 500, color: controller.customIndex1 == 2 ? contentTheme.primary : null),
|
||||
),
|
||||
],
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
),
|
||||
MySpacing.height(16),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: controller.customTabController1,
|
||||
children: [
|
||||
MyText.bodySmall(controller.dummyTexts[0], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[1], fontWeight: 600, letterSpacing: .3),
|
||||
MyText.bodySmall(controller.dummyTexts[2], fontWeight: 600, letterSpacing: .3),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,260 +0,0 @@
|
||||
import 'package:marco/controller/ui/toast_message_controller.dart';
|
||||
import 'package:marco/helpers/theme/app_theme.dart';
|
||||
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
|
||||
import 'package:marco/helpers/utils/my_shadow.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb.dart';
|
||||
import 'package:marco/helpers/widgets/my_breadcrumb_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_card.dart';
|
||||
import 'package:marco/helpers/widgets/my_container.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex.dart';
|
||||
import 'package:marco/helpers/widgets/my_flex_item.dart';
|
||||
import 'package:marco/helpers/widgets/my_spacing.dart';
|
||||
import 'package:marco/helpers/widgets/my_text.dart';
|
||||
import 'package:marco/view/layouts/layout.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:flutter_lucide/flutter_lucide.dart';
|
||||
|
||||
class ToastMessageScreen extends StatefulWidget {
|
||||
const ToastMessageScreen({super.key});
|
||||
|
||||
@override
|
||||
State<ToastMessageScreen> createState() => _ToastMessageScreenState();
|
||||
}
|
||||
|
||||
class _ToastMessageScreenState extends State<ToastMessageScreen> with SingleTickerProviderStateMixin, UIMixin {
|
||||
late ToastMessageController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
controller = ToastMessageController(this);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Layout(
|
||||
child: GetBuilder(
|
||||
init: controller,
|
||||
tag: 'toast_message_controller',
|
||||
builder: (controller) {
|
||||
return Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
MyText.titleMedium(
|
||||
"Toast",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
),
|
||||
MyBreadcrumb(
|
||||
children: [
|
||||
MyBreadcrumbItem(name: 'Widget'),
|
||||
MyBreadcrumbItem(name: 'Toast', active: true),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
MySpacing.height(flexSpacing),
|
||||
Padding(
|
||||
padding: MySpacing.x(flexSpacing / 2),
|
||||
child: MyFlex(
|
||||
children: [
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4 md-6',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: .2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Simple Toast Message", fontWeight: 600),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Primary", contentTheme.primary),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Secondary", contentTheme.secondary),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Success", contentTheme.success),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Warning", contentTheme.info),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Info", contentTheme.warning),
|
||||
MySpacing.height(24),
|
||||
simpleMessage("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4 md-6',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: .2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Light Background Toast", fontWeight: 600),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Primary", contentTheme.primary),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Secondary", contentTheme.secondary),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Success", contentTheme.success),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Warning", contentTheme.info),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Info", contentTheme.warning),
|
||||
MySpacing.height(24),
|
||||
lightBackgroundMessage("Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)),
|
||||
MyFlexItem(
|
||||
sizes: 'lg-4 md-6',
|
||||
child: MyCard.bordered(
|
||||
borderRadiusAll: 4,
|
||||
border: Border.all(color: Colors.grey.withValues(alpha: .2)),
|
||||
shadow: MyShadow(elevation: 1, position: MyShadowPosition.bottom),
|
||||
paddingAll: 24,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
MyText.titleMedium("Icon Toast", fontWeight: 600),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.panel_top, "Primary", contentTheme.primary),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.tally_4, "Secondary", contentTheme.secondary),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.badge_check, "Success", contentTheme.success),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.info, "Info", contentTheme.info),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.octagon_alert, "Warning", contentTheme.warning),
|
||||
MySpacing.height(24),
|
||||
iconToastMessage(LucideIcons.skull, "Danger", contentTheme.danger),
|
||||
],
|
||||
),
|
||||
)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget simpleMessage(String messageTitle, Color color) {
|
||||
return MyContainer(
|
||||
paddingAll: 0,
|
||||
height: 54,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
width: double.infinity,
|
||||
onTap: () => simpleToastMessage(messageTitle, color),
|
||||
color: color,
|
||||
child: Center(
|
||||
child: MyText.bodyMedium(messageTitle, fontWeight: 600, color: contentTheme.onPrimary),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget lightBackgroundMessage(String messageTitle, Color color) {
|
||||
return MyContainer.bordered(
|
||||
paddingAll: 0,
|
||||
height: 54,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
width: double.infinity,
|
||||
borderColor: color,
|
||||
color: color.withAlpha(36),
|
||||
onTap: () => lightBackgroundToastMessage(messageTitle, color),
|
||||
child: Center(child: MyText.bodyMedium(messageTitle, fontWeight: 600, color: color)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget iconToastMessage(IconData icon, String messageText, Color color) {
|
||||
return MyContainer.bordered(
|
||||
height: 54,
|
||||
padding: MySpacing.x(12),
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
onTap: () => iconMessage(messageText, icon, color),
|
||||
child: Row(
|
||||
children: [
|
||||
MyContainer(
|
||||
height: 32,
|
||||
width: 32,
|
||||
paddingAll: 0,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
color: color.withAlpha(36),
|
||||
child: Icon(icon, size: 20, color: color),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
MyText.bodyMedium(messageText, fontWeight: 600),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void simpleToastMessage(String text, Color color) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: 0,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
width: 300,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
duration: Duration(milliseconds: 1200),
|
||||
animation: Tween<double>(begin: 0, end: 300).animate(controller.animationController),
|
||||
content: MyText.labelLarge(text, fontWeight: 600, color: contentTheme.onPrimary),
|
||||
backgroundColor: color,
|
||||
));
|
||||
}
|
||||
|
||||
void lightBackgroundToastMessage(String text, Color color) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: 0,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide(color: color)),
|
||||
width: 300,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
duration: Duration(milliseconds: 1200),
|
||||
animation: Tween<double>(begin: 0, end: 300).animate(controller.animationController),
|
||||
content: MyText.labelLarge(text, fontWeight: 600, color: color),
|
||||
backgroundColor: color.withAlpha(36),
|
||||
));
|
||||
}
|
||||
|
||||
void iconMessage(String text, IconData icon, Color color) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
elevation: .5,
|
||||
shape: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: BorderSide.none),
|
||||
width: 300,
|
||||
behavior: SnackBarBehavior.floating,
|
||||
duration: Duration(milliseconds: 1200),
|
||||
animation: Tween<double>(begin: 0, end: 300).animate(controller.animationController),
|
||||
content: Row(
|
||||
children: [
|
||||
MyContainer(
|
||||
height: 32,
|
||||
width: 32,
|
||||
paddingAll: 0,
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
color: color.withAlpha(36),
|
||||
child: Icon(icon, size: 20, color: color),
|
||||
),
|
||||
MySpacing.width(12),
|
||||
MyText.bodyMedium(text, fontWeight: 600),
|
||||
],
|
||||
),
|
||||
backgroundColor: contentTheme.onPrimary,
|
||||
));
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user