Flutter component

appbar-white-noshadow.dart

      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        foregroundColor: kPrimaryColor,
        title: Text("QR Code"),
      ),

Auth-Flow.dart

import 'package:flutter/material.dart';
import 'package:wastemecha/screens/home/dashboard.dart';
import 'package:wastemecha/screens/welcome/welcome_screen.dart';
import 'package:wastemecha/services/shared_pref.dart';

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

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

class _LandingScreenState extends State<LandingScreen> {
  SharedPref sharedPref = SharedPref();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
        future: sharedPref.readStringToSp('apiToken'),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if (snapshot.hasData) {
            if (snapshot.data != null) {
              return const Dashboard();
            } else {
              return const WelcomeScreen();
            }
          } else {
            return const Scaffold(
              body: Center(
                child: CircularProgressIndicator(),
              ),
            );
          }
        });
  }
}

bottom_navbar.dart

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

class SipenaBottomNavBar extends StatelessWidget {
  const SipenaBottomNavBar({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 35),
      height: 75,
      width: double.infinity,
      // double.infinity means it cove the available width
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, -7),
            blurRadius: 33,
            color: Color(0xFF6DAED9).withOpacity(0.11),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: SvgPicture.asset("assets/icons/home.svg"),
            onPressed: () {},
          ),
          IconButton(
            icon: SvgPicture.asset("assets/icons/Following.svg"),
            onPressed: () {},
          ),
          IconButton(
            icon: SvgPicture.asset("assets/icons/Glyph.svg"),
            onPressed: () {},
          ),
          IconButton(
            icon: SvgPicture.asset("assets/icons/person.svg"),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

box_shadow.dart

boxShadow: [
            BoxShadow(
              color: widget.backgroundColor.withOpacity(0.7),
              blurRadius: 8.0,
              offset: Offset(0.0, 5.0),
            ),]

button-with-image.dart

ElevatedButton.icon(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white)),
                  onPressed: () {},
                  icon: Image.asset(
                    'assets/icons/icon-google.png',
                    scale: 2.0,
                  ),
                  label: const Text(
                    "Sign In With Google",
                    style: TextStyle(color: textPrimaryColor),
                  ))

button_with_style_size_height_and_width.dart

                   ElevatedButton(
                      onPressed: () {
                        // Navigator.push(
                        //     context,
                        //     MaterialPageRoute(
                        //         builder: (context) => HomeScreen()));
                      },
                      child: const Text(
                        "Sign In",
                        style: TextStyle(fontSize: 20),
                      ),
                      style: ElevatedButton.styleFrom(
                        fixedSize: Size(
                          size.width,
                          50,
                        ),
                        primary: textColor,
                        // side: BorderSide(),
                      ),
                    )

container-border-radius-and-border.dart

 Container(
              padding: EdgeInsets.all(10),
              width: size.width * 0.6,
              height: size.height * 0.3,
              decoration: BoxDecoration(
                  border: Border.all(color: kPrimaryColor),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20)),
              alignment: Alignment.center,
              // child: QrImage(
              //   data: 'This is a simple QR code',
              //   version: QrVersions.auto,
              //   size: 320,
              //   gapless: false,
              // ),
            ),

Container_white_with_shadow.dart

decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: [
                      BoxShadow(
                          offset: Offset(0, 11),
                          blurRadius: 50,
                          color: kPrimaryColor)
                    ]),

custom_button_class.dart

import 'package:flutter/material.dart';
import 'package:sofwati_admin/utils/constants.dart';

class ButtonSubmit extends StatelessWidget {
  const ButtonSubmit(
      {Key? key,
      required this.onPress,
      this.label,
      this.icon,
      this.backGroundColor})
      : super(key: key);

  final VoidCallback onPress;
  final String? label;
  final IconData? icon;
  final Color? backGroundColor;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
        style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all(backGroundColor ?? Colors.blue[500]),
            padding: MaterialStateProperty.all(EdgeInsets.all(10))),
        onPressed: () => onPress(),
        icon: Icon(icon ?? Icons.arrow_circle_up_sharp),
        label: Text(label ?? "Submit"));
  }
}

DraggableScrollableSheet.dart

          Container(
            child: DraggableScrollableSheet(
              initialChildSize: 0.3,
              minChildSize: 0.3,
              maxChildSize: 0.8,
              builder: (BuildContext context, myscrollController) {
                return Container(
                  color: Colors.white,
                  child: ListView.builder(
                    controller: myscrollController,
                    itemCount: 25,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                          title: Text(
                        'Dish $index',
                        style: TextStyle(color: Colors.black54),
                      ));
                    },
                  ),
                );
              },
            ),
          ),

elevated button custom border radius

 ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => LoginScreen()));
              },
              child: Text(
                "Login",
                style: TextStyle(
                    color: primaryColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 18),
              ),
              style: ElevatedButton.styleFrom(
                  fixedSize: Size(
                    size.width,
                    50,
                  ),
                  primary: textColorWhite,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10))),
            )

Elevated-button-with-custom-style.dart

                  ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => HomeScreen()));
                      },
                      child: Text("Selesai"),
                      style: ElevatedButton.styleFrom(
                          fixedSize: Size(
                            size.width * 0.4,
                            50,
                          ),
                          primary: kPrimaryColor
                          // side: BorderSide(),
                          ),
                    )

elevated-button-with-custom-style.dart

                  ElevatedButton(
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => HomeScreen()));
                      },
                      child: Text("Selesai"),
                      style: ElevatedButton.styleFrom(
                          fixedSize: Size(
                            size.width * 0.4,
                            50,
                          ),
                          primary: kPrimaryColor
                          // side: BorderSide(),
                          ),
                    )

flutter svg resize

Container(
                  child: SvgPicture.asset(
                  "assets/icons/marker-start.svg",
                  width: 20,
                  height: 20,
                  fit: BoxFit.scaleDown,
                ))

flutter-component.md

flutter_icon_button_no_label.dart

            Container(
                decoration: BoxDecoration(
                  color: unudBackGroundWhiteColor,
                  borderRadius: BorderRadius.circular(100),
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      color: Colors.blue.withOpacity(0.1),
                      blurRadius: 1,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: SvgPicture.asset(
                    'assets/icon/usercare-menu.svg',
                    fit: BoxFit.contain,
                    height: 25,
                    width: 25,
                  ),
                ),
              )

flutter_linear_gradient

      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF72c6f9),Color(0xFFf4fdff)]
        )
      ),

flutter_search_box_shadow.dart

decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    boxShadow: [
                      BoxShadow(
                          offset: Offset(0, 11),
                          blurRadius: 50,
                          color: kPrimaryColor)
                    ]),

form_with_label.dart

Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Align(
                        alignment: Alignment.centerLeft,
                        child: Text("Nama Aktivitas")),
                    TextFormField(
                      controller: _textEditingController,
                      decoration: InputDecoration(
                          hintText: "Please Enter Text",
                          border: OutlineInputBorder()),
                    )
                  ],
                )

form_with_outline_border

                    TextFormField(
                      controller: _textEditingController,
                      decoration: InputDecoration(
                          hintText: "Please Enter Text",
                          border: OutlineInputBorder()),
                    )

header-navigation.dart

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          decoration: BoxDecoration(
            color: unudBackGroundWhiteColor,
            borderRadius: BorderRadius.circular(100),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.blue.withOpacity(0.1),
                blurRadius: 1,
                offset: Offset(0, 2),
              ),
            ],
          ),
          child: IconButton(
            onPressed: () {},
            icon: SvgPicture.asset(
              'assets/icon/usercare-menu.svg',
              fit: BoxFit.contain,
              height: 25,
              width: 25,
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: unudBackGroundWhiteColor,
            borderRadius: BorderRadius.circular(100),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.blue.withOpacity(0.1),
                blurRadius: 1,
                offset: Offset(0, 2),
              ),
            ],
          ),
          child: IconButton(
            onPressed: () {},
            icon: SvgPicture.asset(
              'assets/icon/notification.svg',
              fit: BoxFit.contain,
              height: 25,
              width: 25,
            ),
          ),
        )
      ],
    );

icon-button-circle.dart

                              ClipOval(
                                child: Material(
                                  color: buttonColor, // Button color
                                  child: InkWell(
                                    splashColor:
                                        Colors.blue[300], // Splash color
                                    onTap: () {},
                                    child: SizedBox(
                                        width: 40,
                                        height: 40,
                                        child: Icon(
                                          Icons.phone,
                                          color: Colors.white,
                                        )),
                                  ),
                                ),
                              )

image-background.dart

                        Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            color: Colors.blue[200],
                            borderRadius: BorderRadius.circular(50),
                            image: const DecorationImage(
                              image: NetworkImage(
                                  "https://api.lorem.space/image/face?w=150&h=150"),
                              fit: BoxFit.cover,
                            ),
                          ),
                        )

image-container.dart

Container(
                    alignment: Alignment.center,
                    width: size.width,
                    height: 100,
                    child: Image(
                      fit: BoxFit.cover,
                      image: AssetImage("assets/logo_unud.png"),
                    ),
                  )

image-with-radius.dart

                        ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(20)),
                          child: Image(
                            width: 84,
                            height: 84,
                            image: AssetImage(
                              'assets/avatar/cute.jpg',
                            ),
                            fit: BoxFit.cover,
                          ),
                        ),

image_local_asset.dart

Image(
              image: AssetImage('assets/images/exploration_image.png'),
            )

images---Fri_Nov_05_2021_1636082772052.png

List Method .map() Custom Marker

// MarkerLayerOptions(
//   markers: customMarker(exploreList).toList(),
// ),
  Iterable<Marker> customMarker(List<ExplorationDataLocal> exploreList) {
    Iterable<Marker> dataMarker = exploreList.map((e) {
      return Marker(
        width: 100.0,
        height: 100.0,
        point: LatLng(e.latitude, e.longitude),
        builder: (ctx) => const Icon(
          Icons.place,
          color: mBlueColor,
        ),
      );
    });
    return dataMarker;
  }

mengambil list data Hivedb

  List<ExplorationDataLocal> exploreList = [];

  void getExplore() {
    final keys = exploreBox.keys;
    keys.forEach((element) {
      print("exp: ${element}");
      final dataExplore = exploreBox.get(element);
      setState(() {
        exploreList.add(dataExplore);
      });
    });
  }

money_fromat.dart

import 'package:flutter/cupertino.dart';
import 'package:intl/intl.dart';

class MoneyFormat {
  final int money;
  MoneyFormat({@required this.money});

  // var f = NumberFormat('###.0#', 'en_US');
  // var f = NumberFormat('#,##0.00', 'id_ID'); //2.000.000.00

  var f = NumberFormat('#,##0.##', 'id_ID'); //2.000.000

  // toMoneyFormat() => {print(f.format(12.345))};
  // String toRupiah() => f.format(money).toString();
  String toRupiah() => 'Rp. ${f.format(money)}';
}

// how to use it
// MoneyFormat(money: 2000000).toRupiah(),

navigation-with-timer-animation.dart

Navigator.of(context).pushReplacement(PageRouteBuilder(
    maintainState: true,
    opaque: true,
    pageBuilder: (context, _, __) => const OnBoardingScreen(),
    transitionDuration: const Duration(seconds: 1),
    transitionsBuilder: (context, anim1, anim2, child) {
      return FadeTransition(
        child: child,
        opacity: anim1,
      );
    }));

navigation_with_animation.dart

        Navigator.of(context).pushReplacement(PageRouteBuilder(
            maintainState: true,
            opaque: true,
            pageBuilder: (context, _, __) => const SipenaCheckoutHome(),
            transitionDuration: const Duration(seconds: 1),
            transitionsBuilder: (context, anim1, anim2, child) {
              return FadeTransition(
                child: child,
                opacity: anim1,
              );
            }));

navogation-with-navigator-push.dart

Navigator.push(context,
              MaterialPageRoute(builder: (context) => LcoationFinder()));

provider before build

 WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                  context
                      .read<ExplorationProvider>()
                      .setidStep(data[active].key);
                });

reverse-index-listview.dart

Widget buildListensor(List<SensorDataLocal> sensorDataLocal) {
  return ListView.builder(
      itemCount: sensorDataLocal.length,
      itemBuilder: (BuildContext context, int index) {
        int reverseIndex = sensorDataLocal.length - 1 - index;
        final data = sensorDataLocal[reverseIndex];

        return ListTile(
          leading: Icon(Icons.data_saver_off),
          title: Text(data.localData),
          // subtitle: Text(data.createdAt.toString()),
          subtitle:
              Text(DateFormat('yyyy-MM-dd – kk:mm').format(data.createdAt)),
        );
      });
}

run code after some delay in Flutter

Timer(const Duration(seconds: 2), _getPlace);

running_clock.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Time Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Time Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _timeString;

  @override
  void initState() {
    _timeString = _formatDateTime(DateTime.now());
    Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(_timeString),
      ),
    );
  }

  void _getTime() {
    final DateTime now = DateTime.now();
    final String formattedDateTime = _formatDateTime(now);
    setState(() {
      _timeString = formattedDateTime;
    });
  }

  String _formatDateTime(DateTime dateTime) {
    return DateFormat('MM/dd/yyyy hh:mm:ss').format(dateTime);
  }
}

show_moda_buttom_sheet.dart

import 'package:flutter/material.dart';
import 'package:udayanamobile/utils/constants.dart';

Future<void> showModal(BuildContext context, [Size size]) {
  return showModalBottomSheet<void>(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
    ),
    backgroundColor: Colors.blue,
    context: context,
    builder: (BuildContext context) {
      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          color: unudBackgroundGreyColor,
        ),
        padding: EdgeInsets.only(left: defaultPadding, right: defaultPadding),
        height: size.height * 0.3,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: [
                  Text("Wifi Name"),
                  Text("TP"),
                ],
              ),
              const Text('Modal BottomSheet'),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () => Navigator.pop(context),
              )
            ],
          ),
        ),
      );
    },
  );
}

showModalBottomSheet.dart

  Future<void> showInformastionForm(BuildContext context) async {
    return await showModalBottomSheet(
        context: context,
        builder: (builder) {
          return Container(
            height: 350.0,
            color: Colors.transparent, //could change this to Color(0xFF737373),
            //so you don't have to change MaterialApp canvasColor
            child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(10.0),
                        topRight: const Radius.circular(10.0))),
                child: Center(
                  child: Text("This is a modal sheet"),
                )),
          );
        });
  }
}

svg_asset.dart

SvgPicture.asset(
              'assets/icon/click.svg',
              fit: BoxFit.contain,
              height: 60,
              width: 60,
            ),

text-form-flutter.dart

TextFormField(
      validator: (productName) {
        if (productName == null || productName.isEmpty) {
          return 'Mohon masukkan data barang';
        }
        return null;
      },
      controller: productNameController,
      onTap: () {},
      // controller: _textEditingController,
      decoration: InputDecoration(
        filled: true,
        fillColor: textDisableColor.withOpacity(0.1),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
          borderRadius: BorderRadius.circular(5.0),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.white, width: 2.0),
          borderRadius: BorderRadius.circular(5.0),
        ),
        hintText: "Ketik nama barang",
        hintStyle: TextStyle(color: textDisableColor.withOpacity(0.6)),
        prefixIcon: Padding(
          padding: EdgeInsets.all(5),
          child: Icon(
            Icons.create,
            color: textDisableColor,
          ),
        ),
      ),
    );

text_form_with_icon_and_background.dart

            TextFormField(
              onTap: () {},
              // controller: _textEditingController,
              decoration: InputDecoration(
                filled: true,
                fillColor: textDisableColor.withOpacity(0.1),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                  borderRadius: BorderRadius.circular(25.7),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(25.0),
                ),
                hintText: "Cari disini",
                hintStyle: TextStyle(color: textDisableColor),
                prefixIcon: Padding(
                  padding: EdgeInsets.all(5),
                  child: Icon(
                    Icons.search,
                    color: textDisableColor,
                  ),
                ),
              ),
            ),

textform-borderradius.dart

                  TextFormField(
                    // controller: _textEditingController,
                    decoration: const InputDecoration(
                        hintText: "Cari lokasi penjualan anda",
                        hintStyle: TextStyle(color: kTextColor),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: kTextColor)),
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: kTextColor),
                            borderRadius:
                                BorderRadius.all(Radius.circular(40)))),
                  ),

textformfield-with-border-icon.dart

TextFormField(
                    // controller: _textEditingController,
                    decoration: const InputDecoration(
                        hintText: "Cari lokasi penjualan anda",
                        hintStyle: TextStyle(color: kTextColor),
                        prefixIcon: Padding(
                          padding: EdgeInsets.all(5),
                          child: Icon(
                            Icons.place,
                            color: kPrimaryColor,
                          ),
                        ),
                        suffixIcon: Padding(
                          padding: EdgeInsets.all(5),
                          child: Icon(
                            Icons.cancel,
                            color: mSubtitleColor,
                          ),
                        ),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: kTextColor)),
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: kTextColor),
                            borderRadius:
                                BorderRadius.all(Radius.circular(40)))),
                  ),

time-picker.dart

                              // datetime_picker_formfield: ^2.0.0
                              DateTimeField(
                                format: formatTime,
                                onShowPicker: (context, currentValue) async {
                                  final time = await showTimePicker(
                                    context: context,
                                    initialTime: TimeOfDay.fromDateTime(
                                        currentValue ?? DateTime.now()),
                                  );
                                  return DateTimeField.convert(time);
                                },
                              ),

tutorial custom map array dengan wodget

List Method .map() in Dart and Flutter : https://www.youtube.com/watch?v=6xWVWDvmqeU;