From 116c3bebbd669aa57a8909319350ef75f148b26c Mon Sep 17 00:00:00 2001 From: pavanpodila Date: Fri, 29 Dec 2023 16:34:28 +0530 Subject: [PATCH] adding a code example --- docs/docs/examples/connectivity/index.mdx | 2 +- docs/docs/examples/dice/index.mdx | 2 +- docs/package.json | 1 + docs/pnpm-lock.yaml | 14 ++++ .../{ => home}/NutshellListItem.tsx | 0 docs/src/components/{ => home}/Section.tsx | 0 docs/src/components/{ => home}/Sponsor.tsx | 2 +- .../src/components/{ => home}/Testimonial.tsx | 2 +- docs/src/components/home/code.mdx | 58 ++++++++++++++++ docs/src/pages/index.tsx | 20 ++++-- mobx_examples/.metadata | 34 +++++----- .../lib/counter/without_codegen.dart | 66 +++++++++++++++++++ 12 files changed, 176 insertions(+), 25 deletions(-) rename docs/src/components/{ => home}/NutshellListItem.tsx (100%) rename docs/src/components/{ => home}/Section.tsx (100%) rename docs/src/components/{ => home}/Sponsor.tsx (96%) rename docs/src/components/{ => home}/Testimonial.tsx (96%) create mode 100644 docs/src/components/home/code.mdx create mode 100644 mobx_examples/lib/counter/without_codegen.dart diff --git a/docs/docs/examples/connectivity/index.mdx b/docs/docs/examples/connectivity/index.mdx index 6a8de15e4..ed91bf856 100644 --- a/docs/docs/examples/connectivity/index.mdx +++ b/docs/docs/examples/connectivity/index.mdx @@ -4,7 +4,7 @@ slug: /examples/connectivity --- import { PubBadge } from '../../../src/components/Shield'; -import { Profile } from '../../../src/components/Testimonial'; +import { Profile } from '../../../src/components/home/Testimonial'; import connectivityGif from './connectivity.gif'; = 10.13.0'} + peerDependencies: + webpack: ^4.0.0 || ^5.0.0 + dependencies: + loader-utils: 2.0.4 + schema-utils: 3.3.0 + webpack: 5.89.0 + dev: false + /rc@1.2.8: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true diff --git a/docs/src/components/NutshellListItem.tsx b/docs/src/components/home/NutshellListItem.tsx similarity index 100% rename from docs/src/components/NutshellListItem.tsx rename to docs/src/components/home/NutshellListItem.tsx diff --git a/docs/src/components/Section.tsx b/docs/src/components/home/Section.tsx similarity index 100% rename from docs/src/components/Section.tsx rename to docs/src/components/home/Section.tsx diff --git a/docs/src/components/Sponsor.tsx b/docs/src/components/home/Sponsor.tsx similarity index 96% rename from docs/src/components/Sponsor.tsx rename to docs/src/components/home/Sponsor.tsx index b210a453f..6890334c9 100644 --- a/docs/src/components/Sponsor.tsx +++ b/docs/src/components/home/Sponsor.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { sponsors } from '../data/sponsors'; +import { sponsors } from '../../data/sponsors'; export const Sponsor = ({ logo, url }) => { return ( diff --git a/docs/src/components/Testimonial.tsx b/docs/src/components/home/Testimonial.tsx similarity index 96% rename from docs/src/components/Testimonial.tsx rename to docs/src/components/home/Testimonial.tsx index e3d584957..e2d494778 100644 --- a/docs/src/components/Testimonial.tsx +++ b/docs/src/components/home/Testimonial.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties, FunctionComponent } from 'react'; -import { testimonials } from '../data/testimonials'; +import { testimonials } from '../../data/testimonials'; interface Props { author: string; diff --git a/docs/src/components/home/code.mdx b/docs/src/components/home/code.mdx new file mode 100644 index 000000000..2dc3a4ba2 --- /dev/null +++ b/docs/src/components/home/code.mdx @@ -0,0 +1,58 @@ +## The Classic Counter, in MobX + +The code below has an `observable` that tracks the count, increments using the +`increment` action and renders with an `Observer` widget (the `reaction`). + +```dart +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:mobx/mobx.dart'; + +class SimpleCounter { + final count = Observable(0); + + void increment() { + runInAction(() => count.value++); + } +} + +class CounterView extends StatefulWidget { + const CounterView({Key? key}) : super(key: key); + + @override + CounterExampleState createState() => CounterExampleState(); +} + +class CounterExampleState extends State { + final SimpleCounter counter = SimpleCounter(); + + @override + Widget build(BuildContext context) => Scaffold( + appBar: AppBar( + backgroundColor: Colors.blue, + title: const Text('MobX Counter'), + ), + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'You have pushed the button this many times:', + ), + Observer( + builder: (_) => Text( + '${counter.count.value}', + style: const TextStyle(fontSize: 40), + )), + ], + ), + ), + floatingActionButton: FloatingActionButton( + onPressed: counter.increment, + tooltip: 'Increment', + child: const Icon(Icons.add), + ), + ); +} + +``` diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index d659dc647..3be5ca6ce 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -8,13 +8,15 @@ import { PubBadge, PublishStatus, } from '../components/Shield'; -import { SponsorList } from '../components/Sponsor'; -import { TestimonialList } from '../components/Testimonial'; +import { SponsorList } from '../components/home/Sponsor'; +import { TestimonialList } from '../components/home/Testimonial'; import React from 'react'; import Layout from '@theme/Layout'; import Spline from '@splinetool/react-spline'; -import { NutshellListItem } from '../components/NutshellListItem'; -import { Section } from '../components/Section'; +import { NutshellListItem } from '../components/home/NutshellListItem'; +import { Section } from '../components/home/Section'; +import CodeBlock from '@theme/CodeBlock'; +import counterSource from '!!raw-loader!../../../mobx_examples/lib/counter/without_codegen.dart'; export default function () { return ( @@ -183,6 +185,16 @@ function NutshellSection() { /> + +

Let's see in code...

+ + {counterSource} + ); } diff --git a/mobx_examples/.metadata b/mobx_examples/.metadata index ce13b4201..3e6e02afb 100644 --- a/mobx_examples/.metadata +++ b/mobx_examples/.metadata @@ -1,11 +1,11 @@ # This file tracks properties of this Flutter project. # Used by Flutter tool to assess capabilities and perform upgrades etc. # -# This file should be version controlled. +# This file should be version controlled and should not be manually edited. version: - revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - channel: stable + revision: "78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9" + channel: "stable" project_type: app @@ -13,26 +13,26 @@ project_type: app migration: platforms: - platform: root - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: android - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: ios - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: linux - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: macos - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: web - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 - platform: windows - create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 - base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851 + create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 + base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9 # User provided section diff --git a/mobx_examples/lib/counter/without_codegen.dart b/mobx_examples/lib/counter/without_codegen.dart new file mode 100644 index 000000000..7c262141f --- /dev/null +++ b/mobx_examples/lib/counter/without_codegen.dart @@ -0,0 +1,66 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; +import 'package:mobx/mobx.dart'; + +class SimpleCounter { +// highlight-start + // Step 1 + // ====== + // Setup the observable state. + // In this case its a simple count as an integer. + final count = Observable(0); +// highlight-end + +// highlight-start + // Step 2 + // ====== + // Setup the action to increment the count + void increment() { + runInAction(() => count.value++); + } +// highlight-end +} + +class CounterView extends StatefulWidget { + const CounterView({Key? key}) : super(key: key); + + @override + CounterExampleState createState() => CounterExampleState(); +} + +class CounterExampleState extends State { + final SimpleCounter counter = SimpleCounter(); + + @override + Widget build(BuildContext context) => Scaffold( + appBar: AppBar( + backgroundColor: Colors.blue, + title: const Text('MobX Counter'), + ), + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'You have pushed the button this many times:', + ), +// highlight-start + // Step 3 + // ====== + // Display the count using the Observer (a reaction) + Observer( + builder: (_) => Text( + '${counter.count.value}', + style: const TextStyle(fontSize: 40), + )), +// highlight-end + ], + ), + ), + floatingActionButton: FloatingActionButton( + onPressed: counter.increment, + tooltip: 'Increment', + child: const Icon(Icons.add), + ), + ); +}