Grock

alt text

This is an excellent Flutter package mate πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―πŸ’―

Grock UI Tools Demo

grock_button grock_timer grock_direct_selection_menu grock_menu grock_dropdown grock_info_widget grock_snackbar grock_toast

Firstly 🀫

  return MaterialApp(
    debugShowCheckedModeBanner: false,
    navigatorKey: Grock.navigationKey, // added line
    scaffoldMessengerKey: Grock.scaffoldMessengerKey, // added line
    title: 'Material App',
    home: Home(),
  );

NO CONTEXT NAVİGATİONS 😱

Grock.to || toRemove || back()

GrockContainer(
  onTap: (){
    // for Navigator.push(...)
    Grock.to(Nextpage());
    Grock.to(NextPage(), type: NavType.bottomToTop); // optional navigate animation

    // for Navigator.pushAndRemoveUntil(context, newRoute, (route) => false)
    Grock.toRemove(NextPage());

    // for Navigator.of(context).pop()
    Grock.back();
    Grock.back(result: "Return Object") // optional return object

  },
)

Widgets πŸ‘Š πŸš€

GrockContainer

GrockContainer(
  isKeyboardDismiss: true // default true, optional keyboard dismiss
  isTapAnimation: true //default true, optional tap animation
  onTap: ()=>print("tapped"),
  child: Text("On Tap Container")
)

GrockButton

grock_button

GrockButton(
  child: const Text("GrockButton"),
  onTap: (){},
),

GrockDirectSelectionMenu

grock_direct_selection_menu

GrockDirectSelectionMenu(
  width: double.infinity,
  margin: const EdgeInsets.all(20),
  hintText: "Selection Data",
  value: listActiveIndex,
  onChanged: (index) {
    setState(() {
      listActiveIndex = index;
    });
  },
  items: List.generate(
    list.length,
    (index) => Text(list[index]),
  ),
  /// [Customize your own widget]
  // child: Row(
  //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
  //   children: [
  //   Text(listActiveIndex == null ? "Please selection data" : list[listActiveIndex!]),
  //   listActiveIndex == null ? const Icon(Icons.menu) : Text(list[listActiveIndex ?? 0])
  //   ],
  // ),
 ),

GrockTimer

grock_timer

/// final timerController = GrockTimerController();
GrockTimer(
  controller: timerController,
  startTime: const Duration(seconds: 10),
  endTime: const Duration(seconds: 0),
),

GrockMenu IOS Style

grock_menu

GrockMenu(
  items: [
    GrockMenuItem(
      text: 'Copy',
      trailing: const Icon(Icons.copy,size: 20,),
      onTap: (){
        // Item Tap
        GrockMenu.close(); // close menu
      }
    ),
    GrockMenuItem(
      text: 'Share',
      trailing: const Icon(Icons.ios_share_rounded,size: 20,),
    ),
  ],
  child: const Icon(CupertinoIcons.ellipsis_circle_fill,color: Colors.blue,),
  onTapClose: true, // Close menu when tapping GrockMenuItem, [true by default]
  onTap: (value){
   switch (value) {
    case 0:
      print("Tap Copy");
      break;
    case 1:
      print("Tap Share");
      break;
    default:
      print("Tap Default");
      break;
   }
  },
  dividerBuilder: (context,index)=>index == 1 ? 
  const Divider(height: 0,color: Colors.red,thickness: 2,) : 
  const Divider(color: CupertinoColors.separator,thickness: 1,height: 0,),
)

GrockDropdownButton IOS Style

grock_dropdown

GrockDropdownButton(
  items: [
    for (var item in items)
      GrockDropdownMenuItem(
        child: Text(item),
        onPressed: (String? newValue) {
          setState(() {
            currentValue = newValue;
          });
          Grock.back();
        },
        decoration: BoxDecoration(
          color: currentValue == item
              ? Colors.grey.shade200
              : Colors.white,
          ),
        trailingWidget: currentValue == item
              ? const Icon(Icons.check, color: Colors.green)
              : null,
        ),
      ],
  value: currentValue,
  hintText: "Selection",
),

GrockFadeAnimation

GrockFadeAnimation(
  position: PositionF.bottom,
  duration: Duration(seconds: 2),
  curve: Curves.bounceOut,
  child: child(),
)

GrockGlassmorphism IOS Style

GrockGlassMorphism(
  blur: 20,
  opacity: 0.2,
  borderRadius: BorderRadius.circular(12),
  child: Image(".../images.png") or Container(child: Icon(Icons.search)),
  color: Colors.white,
),

GrockKeyboardClose

return GrockKeyboardClose(
  child: Scaffold(
    // Scaffold on tap and close keyboard
    body: TextField(

    ),
  ),
);

GrockScrollEffect

return GrockScrollEffect(
  child: Scaffold(
    //android drag and scroll effect disable
    body: ListView.builder(
      ....
    ),
  ),
);

GrockHList

return GrockHList(
  itemCount: 10,
  itemHeight: 55,
  itemWidth: 55,
  listHeight: 80,
  itemBuilder: (context, index) {
    return Container();
  },
);

GrockInfoWidget

grock_info_widget

return GrockInfoWidget(
  msg: "Grock Info Popup Tooltip"
);

GrockWidgetSize

return GrockWidgetSize(
  callback: (Size size, Offset offset){
    print("Size: $size");
    print("Offset: $offset");
  },
  child: Container(),
);

GrockWidgetSize

return GrockWidgetSize(
  callback: (Size size, Offset offset){
    print("Size: $size");
    print("Offset: $offset");
  },
  child: Container(),
);

GrockCustomLoadingWidget or Grock.loadingPopup()

Grock.loadingPopup(
  backgroundColor: Colors.black.withOpacity(0.5),
  color: Colors.white,
  borderRadius: BorderRadius.circular(12)
);
return GrockCustomLoadingWidget(
  backgroundColor: Colors.black.withOpacity(0.5),
  color: Colors.white,
  borderRadius: BorderRadius.circular(12)
);

Grock Internet Check Function

  //Splash Screen initState
  @override
  void initState() {
    super.initState();
    Grock.checkInternet();
  }

Snackbar and Dialog and Toast (BUT NO CONTEXT 😁)

Grock.snackBar IOS Style

grock_snackbar

TextButton(
  child: const Text('No Context Snackbar'),
    Grock.snackBar(
      title: "Snackbar",
      description: "Snackbar content",
      blur: 20,
      opacity: 0.2,
      leading: Icon(Icons.error),
      curve: Curves.elasticInOut,
      // ... vs parameters
    ),
),

Grock.dialog

TextButton(
  child: const Text('No Context Dialog'),
  onPressed: () {
    Grock.dialog(builder: (_) {
      return const AlertDialog(
        title:  Text('Dialog'),
        content:  Text('Dialog content'),
      );
    });
  },
),

Grock.toast

grock_toast

GrockButton(
  color: Colors.white,
  child: const Text(
     "Show Toast",
  ),
  onTap: () => Grock.toast(
    text: "This is a toast",
  ),
),

List Extension

['data','data1'].mapIndexed((value, index){})
['data','data1'].forLoop((value, index){})
['data','data1'].mapIndexedWhere((value, index))
['data','data1'].mapFiltered((value){})

String Extension

String.capitalize
String.capitalizeEach
String.capitalizeEachFirst
String.capitalizeEachFirstLower
String.capitalizeEachLower
String.capitalizeEachLowerFirst
String.toDate
String.filter
String.filterNumber
String.forEach
String.forEachFirst
String.forEachFirstLower
String.isPhoneNumber
String.isPhoneNumberWithCountryCode
String.isPhoneNumberWithCountryCodeAndSpace
String.isTurkeyPhoneNumber
String.isTurkeyPhoneNumberWithCountryCode
String.isTurkeyPhoneNumberWithCountryCodeAndSpace
String.isEmail
String.isUrl
String.isUrlWithSpace
String.isEmpty
String.dateTime
String.isDateTimeFormat

Widget Tools 🀩

Widget Extensions

Container().visible(val),
Container().disable(disable),
Container().disableOpacity(disable and opacity: 0.2),
Container().expanded(),
Container().size(width,height),
Container().margin(l,t,r,b),
Container().rotate(),
Container().alignment(alignment),
Container().tooltip(msg),
Container().onTap((){}),
Container().bgBlur(10),
Container().borderRadius(10),
Container().decoration(BoxDecoration),
Container().colored(Color),
Container().shadow(),  
Container().animatedRotation(),
Container().upRotation,
Container().rightRotation,
Container().leftRotation,
Container().bottomRotation,

int Extension

50.randomNum(), // 0-50 random number
index.randomImage(),
index.randomImg()
30.lorem(), // lorem ipsum text
20.height(), // SizedBox(height: 20)
20.width(), // SizedBox(width: 20)
20.heightWidth(), // SizedBox(height: 20,width: 20)
20.borderRadius,
20.borderRadiusOnlyTopLeft,
20.borderRadiusOnlyTopRight,
20.borderRadiusOnlyBottomLeft,
20.borderRadiusOnlyBottomRight,
20.borderRadiusOnlyTop,
20.borderRadiusOnlyBottom,
20.padding,
20.paddingOnlyTop,
20.paddingOnlyBottomRight,
20.paddingOnlyLeftRight,
20.getRandomString(15), // 15 length random string

BuildContext extension

context.bottom, // SafeArea Bottom
context.top,    // SafeArea Top
context.isKeyBoardOpen, // true or false
context.mediaQuery,
context.textTheme, // TextTheme extension
context.orientation,
context.isLandscape,
context.isPortrait,
context.platformBrightness,
context.isPhone, // device size < 600
context.isSmallTablet,
context.isLargeTablet,
context.platform,
context.openDrawer,
context.openEndDrawer,
context.hideCurrentSnackBar,
context.removeCurrentSnackBar,
context.showSnackBar,
context.isTablet,
context.showBottomSheet,
context.hasFocus,
context.isFirstFocus,
context.nextFocus,
context.unfocus,
context.consumeKeyboardToken,
context.validate,
context.reset,
context.save,
context.closeKeyboard,

Grock extension No BuildContext

Grock.height,
Grock.width,
Grock.bottomCenter,
Grock.bottomLeft,
Grock.bottomRight,
Grock.center,
Grock.centerLeft,
Grock.centerRight,
Grock.topLeft,
Grock.topRight,
Grock.topCenter,
Grock.deviceWidth,
Grock.deviceHeight,
Grock.isIOS,
Grock.isAndroid,
Grock.isMacOS,
Grock.isWindows,
Grock.isLinux,
Grock.isFuchsia,
Grock.isDebugMode,
Grock.isReleaseMode,
Grock.isProfileMode,
Grock.hideKeyboard,

Padding or Margin and BorderRadius

  GrockContainer(
    margin: 10.verticalP,
    // margin: 10.horizontalP,
    // margin: 10.allP,
    padding: [20,40].horizontalAndVerticalP,
    // padding: [10,13,14,12].paddingLTRB
    width: Grock.width * 0.3,
    height: Grock.height * 0.1,
    decoration: BoxDecoration(
      borderRadius: 15.allBR,
  ),
),

Random Online Image

GrockList(
  isExpanded: true,
  itemSpace: const Divider(),
  itemCount: 10,
  itemBuilder: (context,index)=>Image.network(
    index.randomImg(), // width and height optional
  ),
)

Libraries

grock