material_design_mirae 0.0.2

Material Design Mirae Asset Sekuritas Indonesia

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Design MASI',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List _titleColors = [
    'Nautral 10',
    'Nautral 20',
    'Nautral 30',
    'Nautral 40',
    'Nautral 50',
    'Nautral 60',
    'Nautral 70',
    'Nautral 80',
    'Nautral 90',
    'Nautral 100',
    'Primary Main',
    'Primary Surface',
    'Primary Hover',
    'Primary Border',
    'Primary Pressed',
    'Primary Focus',
    'Secondary Main',
    'Secondary Surface',
    'Secondary Hover',
    'Secondary Border',
    'Secondary Pressed',
    'Secondary Focus',
    'Danger Main',
    'Danger Surface',
    'Danger Hover',
    'Danger Border',
    'Danger Pressed',
    'Info Main',
    'Info Surface',
    'Info Hover',
    'Info Border',
    'Info Pressed',
    'Success Main',
    'Success Surface',
    'Success Hover',
    'Success Border',
    'Success Pressed',
    'Warning Main',
    'Warning Surface',
    'Warning Hover',
    'Warning Border',
    'Warning Pressed',
  ];
  final List _colors = [
    neutral10,
    neutral20,
    neutral30,
    neutral40,
    neutral50,
    neutral60,
    neutral70,
    neutral80,
    neutral90,
    neutral100,
    primary,
    primarySurface,
    primaryHover,
    primaryBorder,
    primaryPressed,
    primaryFocused,
    secondary,
    secondarySurface,
    secondaryHover,
    secondaryBorder,
    secondaryPressed,
    secondaryFocus,
    danger,
    dangerSurface,
    dangerHover,
    dangerBorder,
    dangerPressed,
    info,
    infoSurface,
    infoHover,
    infoBorder,
    infoPressed,
    success,
    successSurface,
    successHover,
    successBorder,
    successPressed,
    warning,
    warningSurface,
    warningHover,
    warningBorder,
    warningPressed,
  ];

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primary,
        title: const Text('Material Design MASI'),
      ),
      drawer: Drawer(
        child: SafeArea(
          child: ListView(
            shrinkWrap: true,
            padding: EdgeInsets.symmetric(horizontal: 10),
            children: [
              Text(
                'Colors',
                style: TextStyle(
                  color: neutral100,
                  fontSize: 25,
                ),
              ),
            ],
          ),
        ),
      ),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: Text(
                'Buttons',
                style: TextStyle(
                  color: neutral100,
                  fontSize: 25,
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  width: size.width * .2 - 10,
                  height: 40,
                  child: buttonMASI(
                    context,
                    buttonColor: primary,
                    onPressed: () {
                      print("Click Button Primary");
                    },
                    child: FittedBox(
                      child: Text(
                        'Primary',
                        style: TextStyle(
                          color: neutral10,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: size.width * .2 - 10,
                  height: 40,
                  child: buttonMASI(
                    context,
                    buttonColor: secondary,
                    onPressed: () {
                      print("Click Button Primary");
                    },
                    child: FittedBox(
                      child: Text(
                        'Second',
                        style: TextStyle(
                          color: neutral10,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: size.width * .2 - 10,
                  height: 40,
                  child: buttonMASI(
                    context,
                    buttonColor: warning,
                    onPressed: () {
                      print("Click Button Warning");
                    },
                    child: FittedBox(
                      child: Text(
                        'Warn',
                        style: TextStyle(
                          color: neutral10,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: size.width * .2 - 10,
                  height: 40,
                  child: buttonMASI(
                    context,
                    buttonColor: danger,
                    onPressed: () {
                      print("Click Button Danger");
                    },
                    child: FittedBox(
                      child: Text(
                        'Danger',
                        style: TextStyle(
                          color: neutral10,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: size.width * .2 - 10,
                  height: 40,
                  child: buttonMASI(
                    context,
                    buttonColor: info,
                    onPressed: () {
                      print("Click Button Danger");
                    },
                    child: FittedBox(
                      child: Text(
                        'Info',
                        style: TextStyle(
                          color: neutral10,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 18,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: Text(
                'Cards',
                style: TextStyle(
                  color: neutral100,
                  fontSize: 25,
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  width: size.width * .5 - 10,
                  child: cardMASI(
                    shadowColor: neutral60.withOpacity(0.1),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: size.width,
                          height: 100,
                          child: Icon(
                            Icons.image,
                            color: neutral50,
                          ),
                          decoration: BoxDecoration(
                            borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(10.0),
                              topLeft: Radius.circular(10.0),
                            ),
                            color: neutral40,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                'Card Header',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontFamily: 'SpoqaHanSansNeoBold',
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.symmetric(vertical: 8.0),
                                child: Text(
                                  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
                                  style: TextStyle(
                                    fontFamily: 'SpoqaHanSansNeo',
                                  ),
                                ),
                              ),
                              Text(
                                'Card Footer',
                                style: TextStyle(
                                  fontSize: 12,
                                  fontFamily: 'SpoqaHanSansNeoLight',
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  width: size.width * .5 - 10,
                  child: cardMASI(
                    shadowColor: neutral60.withOpacity(0.1),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: size.width,
                          height: 100,
                          child: Icon(
                            Icons.image,
                            color: neutral50,
                          ),
                          decoration: BoxDecoration(
                            borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(10.0),
                              topLeft: Radius.circular(10.0),
                            ),
                            color: neutral40,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                'Card Header',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontFamily: 'SpoqaHanSansNeoBold',
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.symmetric(vertical: 8.0),
                                child: Text(
                                  'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum',
                                  style: TextStyle(
                                    fontFamily: 'SpoqaHanSansNeo',
                                  ),
                                ),
                              ),
                              Text(
                                'Card Footer',
                                style: TextStyle(
                                  fontSize: 12,
                                  fontFamily: 'SpoqaHanSansNeoLight',
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 18,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: Text(
                'Colors',
                style: TextStyle(
                  color: neutral100,
                  fontSize: 25,
                ),
              ),
            ),
            GridView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemCount: _colors.length,
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 80,
                childAspectRatio: 4 / 3,
                crossAxisSpacing: 5,
                mainAxisSpacing: 5,
              ),
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: _colors[index],
                  ),
                  child: Center(
                    child: Text(
                      _titleColors[index],
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: neutral10,
                        fontFamily: 'SpoqaHanSansNeoBold',
                        fontSize: 10,
                        shadows: <Shadow>[
                          Shadow(
                            offset: const Offset(0.0, 0.0),
                            blurRadius: 10.0,
                            color: neutral100,
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
            const SizedBox(
              height: 18,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: Text(
                'Form',
                style: TextStyle(
                  color: neutral100,
                  fontSize: 25,
                ),
              ),
            ),
            cardMASI(
              shadowColor: neutral100.withOpacity(0.3),
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: Column(
                  children: [
                    Text(
                      'Form MASI',
                      style: TextStyle(
                        color: neutral100,
                        fontSize: 25,
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    textFormMASI(
                      hintText: 'Username',
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    textFormMASI(
                      hintText: 'Password',
                      obscureText: true,
                      suffixIcon: IconButton(
                        onPressed: () => print('show'),
                        icon: Icon(
                          Icons.remove_red_eye,
                          size: 18,
                          color: neutral60,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    SizedBox(
                      width: size.width,
                      height: 45,
                      child: buttonMASI(
                        context,
                        buttonColor: primary,
                        onPressed: () {
                          print("Click Button Primary");
                        },
                        child: Text(
                          'Submit',
                          style: TextStyle(
                            color: neutral10,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}