Skip to content

Commit

Permalink
adding a code example
Browse files Browse the repository at this point in the history
  • Loading branch information
pavanpodila committed Dec 29, 2023
1 parent 38be286 commit 116c3be
Show file tree
Hide file tree
Showing 12 changed files with 176 additions and 25 deletions.
2 changes: 1 addition & 1 deletion docs/docs/examples/connectivity/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<Profile
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/examples/dice/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ slug: /examples/dice
---

import { PubBadge } from '../../../src/components/Shield';
import { Profile } from '../../../src/components/Testimonial';
import { Profile } from '../../../src/components/home/Testimonial';
import diceJpg from './dice.gif';

<Profile
Expand Down
1 change: 1 addition & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"devDependencies": {
"@docusaurus/module-type-aliases": "3.0.0",
"@docusaurus/types": "^3.0.1",
"raw-loader": "^4.0.2",
"@types/lodash.get": "^4.4.9",
"@types/node": "^20.10.5",
"@types/react": "^18.2.45",
Expand Down
14 changes: 14 additions & 0 deletions docs/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { sponsors } from '../data/sponsors';
import { sponsors } from '../../data/sponsors';

export const Sponsor = ({ logo, url }) => {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { CSSProperties, FunctionComponent } from 'react';
import { testimonials } from '../data/testimonials';
import { testimonials } from '../../data/testimonials';

interface Props {
author: string;
Expand Down
58 changes: 58 additions & 0 deletions docs/src/components/home/code.mdx
Original file line number Diff line number Diff line change
@@ -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<CounterView> {
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: <Widget>[
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),
),
);
}
```
20 changes: 16 additions & 4 deletions docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -183,6 +185,16 @@ function NutshellSection() {
/>
</div>
</div>

<h2 className={'my-16'}>Let's see in code...</h2>
<CodeBlock
language={'dart'}
showLineNumbers={true}
className={'my-8 overflow-auto'}
title={'Classic Counter example in MobX'}
>
{counterSource}
</CodeBlock>
</Section>
);
}
Expand Down
34 changes: 17 additions & 17 deletions mobx_examples/.metadata
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
# 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

# Tracks metadata for the flutter migrate command
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

Expand Down
66 changes: 66 additions & 0 deletions mobx_examples/lib/counter/without_codegen.dart
Original file line number Diff line number Diff line change
@@ -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<CounterView> {
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: <Widget>[
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),
),
);
}

0 comments on commit 116c3be

Please sign in to comment.