velocity_x 0.3.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

VelocityX

VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development easier and more joyful than ever.

Inspired from Tailwindcss and SwiftUI. #

"Web".text.white.xl4.bold.center.makeCentered().box.roundedLg.red500.shadow2xl.make().whHalf(context).centered());

Show some ❤️ and star the repo. #

GitHub followers Twitter Follow

Open Source Love

Quick start #

Read the Getting started page of VelocityX

YouTube Channel #

MTechViral

Facebook Group #

Let's Flutter With Dart

Collection of flutter apps with tutorial #

Flutter Example Apps

Screenshot #

Contributing #

VelocityX is 100% free and open source. We encourage and support an active, healthy community that accepts contributions from the public – including you. There are a couple of ways in which you can contribute to the growing community of VelocityX.

  • Pick up any issue marked with "good first issue"
  • Fix a bug
  • Write and improve some documentation. Documentation is very critical to us. We would appreciate help in adding multiple languages to our docs.
  • If you are a developer, feel free to check out the source and submit pull requests.
  • Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
  • Please don't forget to like, follow, and star our repo!

Documentation #

Installation Guide

❤️ Found this project useful? #

If you found this project useful, then please consider giving it a ⭐ on Github and sharing it with your friends via social media.

Project Created & Maintained By #

Pawan Kumar #

Google Developer Expert for Flutter. Passionate #Flutter, #Android Developer. #Entrepreneur #YouTuber

Donate #

If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of ☕

Note: VelocityX is not directly and/or indirectly associated/affiliated with Flutter or Google LLC. #

Code and documentation Copyright 2020 Pawan Kumar. Code released under the [Apache License]. Docs released under Creative Commons.

[0.3.4] - May 04, 2020 #

  • Fixed transform extension issues.
  • Added clip prop to the card and box.
  • Added guard similar to Swift.
  • Many more extensions added for context, iterable and num like duration, sum, themedata etc.
  • Bug Fixes

[0.3.2] - April 13, 2020 #

  • Added VxTextDropDown Widget with textDropDown() ext.
  • Added VxRandomBox Widget with randomBox() ext.
  • Added Vx.log(), Vx.inspect() utilities.
  • Added Vx.isReleaseMode, Vx.isProfileMode, Vx.isDebugMode, Vx.isWeb utilities..
  • Example App updated.
  • Bug Fixes

[0.3.1] - April 10, 2020 #

  • Added VxSwiper Widget with swiper() ext.
  • Added VxAppBar Widget with search functionality.
  • Added VxShimmar Widget with shimmer() ext.
  • Added size(), square(), withDecoration() methods to boxes.
  • isMobile prop added for context.
  • Example App updated.
  • Bug Fixes

Breaking Change[0.3.0] - April 07, 2020 #

  • VxCard Introduced
  • withShadow method for box added.
  • withGradient method for box added.
  • scaleFactor for text improved.
  • withRounded method added for Vx.

These classes are renamed (Breaking change).

  1. VelocityX -> Vx

  2. VelocityAnimatedBox -> VxAnimatedBox

  3. VelocityConditional -> VxConditional

  4. VelocityConditionalSwitch -> VxConditionalSwitch

  5. VelocityEnsureVisibleWhenFocused -> VxEnsureVisibleWhenFocused

  6. VelocityDevice -> VxDevice

  7. VelocityResponsive -> VxResponsive

  8. VelocityTwo -> VxTwo

  9. VelocityTwoColumn -> VxTwoColumn

  10. VelocityTwoRow -> VxTwoRow

  11. VelocityZeroCard -> VxZeroCard

  12. VelocityZeroList -> VxZeroList

  13. VelocityBox -> VxBox

  14. VelocityXBlock -> VxBlock

  15. VelocityXInlineBlock -> VxInlineBlock

  16. VelocityDiscList -> VxDiscList

  17. VelocityDecimalList -> VxDecimalList

[0.2.0] - April 01, 2020 #

-- Added support for rich text. -- Added support for animated container. -- Added new textstyle prop for all kind of texts.

Breaking Change[0.1.2] - March 23, 2020 #

-- Renamed Colors -> Eg: redColor100 is now red100 and red100 is now redHex100. -- It will make the color naming consistent. -- Neumorphism added to the box.

[0.1.1] - March 21, 2020 #

  • Bug Fixes for stable channel

[0.1.0] - March 20, 2020 #

  • initial release to public.

example/lib/main.dart

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

void main() => runApp(MaterialApp(
      home: Demo(),
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      debugShowCheckedModeBanner: false,
    ));

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Vx.inspect("message");
    return Scaffold(
      appBar: VxAppBar(
        searchBar: true,
        title: "Vx Demo".text.make(),
      ),
      body: VStack([
        "Welcome to VelocityX".text.semiBold.blue500.xl4.make(),
        20.heightBox,
        "${context.isMobile ? 'We are on mobile' : 'We are on Web'}"
            .text
            .bold
            .white
            .size(context.isMobile ? 20 : 40)
            .center
            .make()
            .animatedBox
            .width(!context.isMobile
                ? context.screenWidth
                : context.percentWidth * 50)
            .height(context.percentHeight * 20)
            .rounded
            .p8
            .alignCenter
            .shadow2xl
            .linearGradient([Vx.teal400, Vx.indigo400]).makeCentered(),
        20.heightBox,
        [
          "Item 1"
              .text
              .white
              .make()
              .shimmer()
              .box
              .rounded
              .alignCenter
              .black
              .make()
              .p4(),
          "Item 2".text.make().box.rounded.alignCenter.green500.make().p4(),
          "Item 3".text.make().box.rounded.alignCenter.blue500.make().p4(),
          "Item 4".text.make().box.rounded.alignCenter.red500.make().p4(),
          "Item 5".text.make().box.rounded.alignCenter.orange500.make().p4(),
          "Item 6".text.make().box.rounded.alignCenter.pink500.make().p4(),
        ].swiper(
            height: context.isMobile ? 200 : 400,
            enlargeCenterPage: true,
            scrollDirection:
                context.isMobile ? Axis.vertical : Axis.horizontal),
        20.heightBox,
        "Neumorphic"
            .text
            .bold
            .make()
            .box
            .alignCenter
            .width(200)
            .height(200)
            .roundedLg
            .neumorphic(color: Colors.white, curve: VxCurve.flat)
            .make(),
        20.widthBox,
        const VxDiscList(
          ["Disc Item 1", "Disc Item 2"],
          primary: false,
        ),
        const VxDecimalList(
          ["Decimal Item 1", "Decimal Item 2"],
          primary: false,
        ),
        ["Item 1", "Item 2", "Item 3"]
            .textDropDown(
              selectedValue: "Item 1",
              onChanged: (value) {
                Vx.log(value);
              },
            )
            .make(),
      ]).p16().scrollVertical(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  velocity_x: ^0.3.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:velocity_x/velocity_x.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
97
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Jun 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.9+1
  • Flutter: 1.17.3

Analysis suggestions

Package not compatible with SDK dart

because of import path [velocity_x]

Health suggestions

Fix lib/src/flutter/appbar.dart. (-2.96 points)

Analysis of lib/src/flutter/appbar.dart reported 6 hints, including:

line 335 col 47: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 336 col 32: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 337 col 32: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

line 338 col 45: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

line 339 col 32: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..

Fix lib/src/flutter/drop_down_button.dart. (-0.50 points)

Analysis of lib/src/flutter/drop_down_button.dart reported 1 hint:

line 36 col 58: 'subhead' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is subtitle1. This feature was deprecated after v1.13.8..

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
auto_size_text ^2.1.0 2.1.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test