varx_design_system 0.2.8 varx_design_system: ^0.2.8 copied to clipboard
Varx Design System
import 'package:flutter/material.dart';
import 'package:varx_design_system/varx_design_system.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const VarxApp(
primary: Color(0xFF0058CA),
home: MyHomePage(title: 'Varx Design System'),
);
// return MaterialApp(
// title: 'Flutter Demo',
// theme: ThemeData(
// primarySwatch: Colors.blue,
// ),
// home: const MyHomePage(title: 'Flutter Demo Home Page'),
// );
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isLoading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: const [
VarxAvatar(
name: 'Muhammad Noer',
),
VarxAvatar(
name: 'Muhammad Noer',
backgroundImage: NetworkImage(
'https://img.freepik.com/free-vector/3d-boy-cartoon-character-head-with-headphones-social-network-profile-vector-illustration_480270-393.jpg'),
),
],
),
VarxButton(
onTap: () {
setState(() {
isLoading = !isLoading;
});
},
prefixIcon: const Icon(
Icons.add,
size: 18,
),
fullWidth: false,
label: 'Add',
isLoading: isLoading,
),
const SizedBox(height: 12),
VarxButton(
onTap: () {
setState(() {
isLoading = !isLoading;
});
},
label: 'Add',
isLoading: isLoading,
),
const SizedBox(height: 12),
VarxButton(
type: VarxButtonType.secondary,
onTap: () {
setState(() {
isLoading = !isLoading;
});
},
fullWidth: true,
prefixIconData: Icons.ac_unit,
suffixIconData: Icons.add,
label: 'Add',
isLoading: isLoading,
),
const SizedBox(height: 12),
VarxButton(
type: VarxButtonType.text,
onTap: () {
setState(() {
isLoading = !isLoading;
});
},
prefixIcon: const Icon(Icons.ac_unit),
suffixIcon: const Icon(Icons.add),
fullWidth: true,
label: 'Add',
isLoading: isLoading,
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
VarxIconButton(
onTap: () {},
iconData: Icons.camera_alt_outlined,
),
VarxIconButton(
onTap: () {},
iconData: Icons.image,
borderRadius: BorderRadius.circular(8),
backgroundColor:
Theme.of(context).colorScheme.tertiaryContainer,
iconColor: Theme.of(context).colorScheme.onTertiaryContainer,
),
VarxIconButton(
onTap: () {},
iconData: Icons.delete,
borderRadius: BorderRadius.circular(8),
backgroundColor: Theme.of(context).colorScheme.errorContainer,
iconColor: Theme.of(context).colorScheme.error,
),
],
),
const SizedBox(height: 12),
const VarxTextField(
label: 'Name',
isRequired: true,
hintText: 'Enter Name',
errorText: 'Isi dong!!!!',
labelPadding: EdgeInsets.only(left: 18),
),
const SizedBox(height: 12),
const VarxTextField(
label: 'Name',
hintText: 'Enter Name',
enabled: false,
),
const VarxTextField(
label: 'Name',
hintText: 'Enter Name',
),
const SizedBox(height: 12),
VarxLabelButton(
onTap: () {},
buttonText: 'Select File',
),
LabelValue(
label: 'Name',
value: 'Theresa Weeb',
valueStyle: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
const LabelValue(
label: 'CID',
value: '0101223059',
),
VarxExpansionTile(
title: 'Identity',
children: [
LabelValue(
label: 'Name',
value: 'Theresa Weeb',
valueStyle: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
const LabelValue(
label: 'CID',
value: '0101223059',
),
const LabelValue(
label: 'Alias Name',
value: '-',
),
],
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}