Skip to content

Commit 6185b42

Browse files
committed
Reducing size of readme to fit maximum content length (131072 bytes).
1 parent adfb444 commit 6185b42

File tree

1 file changed

+17
-30
lines changed

1 file changed

+17
-30
lines changed

README.md

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -532,13 +532,13 @@ class _DemoAppState extends State<DemoApp> {
532532
> `FlexColorScheme.comfortablePlatformDensity`, instead of the **default** counter application's
533533
> `VisualDensity.adaptivePlatformDensity`.
534534
>
535-
> This is an alternative visaul density design that on desktop applications results in the Flutter
535+
> This is an alternative visual density design that on desktop applications results in the Flutter
536536
> `comfortable` visual density being used, instead of `compact`. On devices, they both result in the default large
537537
> `standard` visual density that is suitable for small touch devices.
538538
>
539539
> This helper function was added to
540-
> provide an easy option for using a bit larger UI elements on desktop and web apps, while keeping the correct
541-
> size for devices.
540+
> provide an easy option for using a bit larger UI elements on desktop and web apps,
541+
> while keeping the correct size for devices.
542542
>
543543
> If the desktop and web versions of the app is used on computers with touch screens, the `comfortable` density provides
544544
> a nice balance. It still looks compact enough to be desktop like, while providing
@@ -572,13 +572,12 @@ convenient fixes for some theme design gaps in Flutter's own themes created with
572572
## Example 2 - Create a Custom Color Scheme
573573

574574
This example shows how you can define your own `FlexSchemeData` and create `FlexColorScheme` based themes from it.
575-
A theme showcase widget shows the theme with several common Material widgets.
576575

577-
The full code is not shown in the tutorial, please see the code in the package folder
576+
The full code is not shown in the tutorial, please see the code in the folder
578577
[flex_color_scheme/example/lib/example2](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example2/main.dart)
579578
for the entire example.
580579

581-
To make a custom color scheme, we will for simplicity just define it as a constant in this example.
580+
To make a custom color scheme, we will for simplicity define it as a constant in this example.
582581
We make a `FlexSchemeData` object with a name, description and scheme colors defined with
583582
`FlexSchemeColor` for the light and matching dark scheme. In this example we use dark purple and deep green
584583
and matching desaturated versions for the dark scheme.
@@ -609,10 +608,7 @@ const FlexSchemeData customFlexScheme = FlexSchemeData(
609608
```
610609
> **NOTE:**
611610
>The above custom color scheme is fairly close to the built-in scheme
612-
> **Barossa**. If you like it, you can probably use it instead. It is not
613-
> exactly the same though, the `barossa` color scheme is a bit different, but
614-
> only in very minor ways. The `barossa` color scheme was introduced in version
615-
> 1.4.1, and was inspired and based on this example.
611+
> **Barossa**. If you like it, you can probably use it instead.
616612
617613
We use the `FlexSchemeData` **customFlexScheme** instance `light` and `dark` properties as scheme `colors`
618614
for the `FlexColorScheme.light` and `dark` factory for each theme mode and `toTheme` to get the themes they define.
@@ -664,10 +660,10 @@ theme properties.
664660
## Example 3 - Switch Between Different Color Schemes
665661

666662
This example shows how you can use three built-in color schemes, add a custom scheme and then use all four as
667-
selectable `FlexColorScheme` based theme options in an application. The example also uses strong branded surface
668-
colors. A theme showcase widget shows the theme with several common Material widgets.
663+
selectable `FlexColorScheme` based theme options in an application. The example also uses strong branded
664+
surface colors.
669665

670-
The full example code is not shown here, please see the code in the package folder
666+
The full example code is not shown here, please see the code in the folder
671667
[flex_color_scheme/example/lib/example3](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example3/main.dart)
672668
for the entire example.
673669

@@ -745,7 +741,7 @@ setting, by setting `showSystemMode` to `false`, thus removing this option from
745741
),
746742
```
747743

748-
These are the four resulting different themes with their light and dark modes, that we can select and
744+
These are the four resulting themes with their light and dark modes, that we can select and
749745
use in this example.
750746

751747
**Hippie blue** scheme in light and dark mode.
@@ -766,8 +762,7 @@ Try example 3 live on the [**web here**](https://rydmike.com/flexcolorscheme3).
766762

767763
This example shows how you can use all the built-in color schemes, plus three custom schemes.
768764
How to interactively select which one of these schemes is used to define the active theme. The example also uses
769-
medium branded background and surface colors. A theme showcase widget shows the theme with several common Material
770-
widgets. A subpage is also available that shows the same theme applied when opening another page, that in Flutter
765+
medium branded background and surface colors. A subpage is also available that shows the same theme applied when opening another page, that in Flutter
771766
just inherits the same theme.
772767

773768
The full example code is not shown here, please see the code in the package folder
@@ -847,10 +842,7 @@ Next we create a list with all the `FlexSchemeData` objects we will use as our s
847842
starting with all the built-in ones and adding our three custom ones at the end.
848843

849844
>A **FlexSchemeData** object stores `name` and `description` plus the matching `FlexSchemeColor` for `light`
850-
>and `dark` mode color schemes. As a rule of thumb, the dark scheme colors must be less saturated than its light
851-
>scheme colors used for a light theme. Using the same colors in a light and dark color schemes seldom produce nice
852-
>looking or very usable dark and light theme mode pairs. You can read more in the Material Design guide about
853-
>selecting suitable [dark theme colors](https://www.material.io/design/color/dark-theme.html#usage).
845+
>and `dark` mode color schemes.
854846
855847
Next we unpack the predefined `FlexSchemeData` into the list `myFlexSchemes` with the spread operator, add our
856848
own light and dark scheme definition pairs as `FlexSchemeData` to the end. For our last custom `FlexSchemeColor`
@@ -967,8 +959,7 @@ bar theme features. The usage of the true black theme feature for dark themes is
967959
Using the optional Windows desktop like tooltip theme is also shown.
968960

969961
The example includes a dummy responsive side menu and rail to give a visual presentation of what applications
970-
that have larger visible surfaces using the surface branding look like. A theme showcase widget again shows
971-
the theme with several common Material widgets.
962+
that have larger visible surfaces using the surface branding look like.
972963

973964
A subpage is also available that show that the same active theme is also applied when opening another page.
974965
This is because all the built-in widgets use the same inherited theme and use the colors in the theme in
@@ -989,7 +980,7 @@ for the entire example's code.
989980

990981
### Example 5 - Local State and Setup
991982

992-
In this example we will be able to toggle the used app bar theme style, the surfaces branding strength,
983+
In this example we can toggle the used app bar theme style, the surfaces branding strength,
993984
tooltip style and try the true black theme toggle for dark-mode. This is done so that you can interactively try the
994985
options and see what they do.
995986

@@ -1009,7 +1000,7 @@ We also introduce a toggle that allows us to for all the schemes use the `toDark
10091000
of the hand tuned built-in ones. You can then compare the results. The `toDark` method does a pretty good job and can
10101001
even be tuned with a property if so desired. If you use this toggle on the last custom scheme, you will not see
10111002
any difference, because we already created its dark scheme with this method. The toggle computes the same
1012-
dark scheme for that case again. There is also a slider that you can use to adjust the white blend level
1003+
dark scheme for that case again. There is a slider that you can use to adjust the white blend level
10131004
of the `toDark` method. From its default value of 35%, to be anything from 0...100 %, so you can experiment
10141005
with it and see what it does.
10151006

@@ -1145,18 +1136,14 @@ like `colors`, `scheme`, `surfaceStyle` and `usedColors` will have an impact on
11451136
returned by **FlexColorScheme**.
11461137

11471138
> **AVOID**
1148-
> Using a light theme and dark theme that do no define and use the same `Typogrpahy`!
1149-
>
1139+
> Using a light theme and dark theme that do no define and use the same `Typogrpahy`!
11501140
> To make the above demo work interactively we also have to make sure we use the same **typography** when
11511141
> we make the ThemeData object from the returned ColorScheme.
11521142
> If we do not, the animated theme will show an assertion error, because the **Flutter SDK** cannot
11531143
> animate between text themes using different `Typography`. To fix this, we use the same nicer
11541144
> and newer typography that is used by default by FlexColorScheme based themes. We also add the
11551145
> visual density to the `ThemeData` with the same `copyWith`, so we get the same Widget spacing
11561146
> as the one used in our `FlexColorScheme.light().toTheme` setup.
1157-
>
1158-
> The above setups ensures that we get as equivalent ThemeData designs as possible, showing only
1159-
> the actual differences.
11601147
11611148
### Example 5 - Equivalent Setup for the Dark Theme, but with More Options
11621149

@@ -1227,7 +1214,7 @@ This is certainly also a usable option, but in this example we do not want this
12271214
12281215
### Example 5 - Passing All the Values Back and Forth to the HomePage
12291216

1230-
The rest of the additions in the stateful MaterialApp are just passing in current values and getting a new value for
1217+
The rest of the additions in the stateful MaterialApp are only passing in current values and getting a new value for
12311218
it via callbacks for all our settings and their current values.
12321219

12331220
It is certainly getting tedious to do it this way by now. Since it was stated that we would not add any

0 commit comments

Comments
 (0)