Converting the default incrementing counter program to using the provider package

This entry is part 2 of 2 in the series Flutter

Convert the default flutter incrementing counter program to using the provider package.

Github: https://github.com/somaria/flutter_incrementData_try1.git

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<IncrementCounter>(
      builder: (context) => IncrementCounter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    Provider.of<IncrementCounter>(context).incrementData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              Provider.of<IncrementCounter>(context).dataCounter.toString(),
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class IncrementCounter extends ChangeNotifier {
  int dataCounter = 0;

  void incrementData() {
    dataCounter = dataCounter + 1;
    notifyListeners();
  }
}

Flutter webview

This entry is part 1 of 2 in the series Flutter

Flutter webview:

Github: https://github.com/somaria/flutter_webview_try15

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WebViewController _webviewController;

  String filePath = 'files/test.html';
  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webviewController.loadUrl(
      Uri.dataFromString(fileHtmlContents,
              mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
          .toString(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Webview Demo'),
        ),
        body: WebView(
          initialUrl: 'files/test.html',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webviewController) {
            _webviewController = webviewController;
            _loadHtmlFromAssets();
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}

ReactJS: Hover over button

This entry is part 35 of 35 in the series React JS

See the Pen React hover demo by Smashcat (@naturalclar) on CodePen.

class Icon extends React.Component{
  constructor (props) {
    super(props);
    this.state= {
      hover: false
    };
  }
  
   handleHover() {
    this.setState({hover: !this.state.hover});
  }
  
  render() {
    var iconStyle={
      transform: this.state.hover ? 'translateY(-5px)' : 'none',
      boxShadow: this.state.hover ? '3px 3px 5px #000' : 'none',
      color: this.state.hover? "#fff" : "#aaa",
      background: this.state.hover? '#55acee' :'#222',
      transition: "all .3s",
      borderRadius: '50%',
      height: 50,
      width: 50,
      textAlign:'center',
      lineHeight: '50px'
    }
    return (
      <a href={this.props.href}><i className={this.props.icon} style={iconStyle} onMouseEnter={()=>this.handleHover()} onMouseLeave={()=>this.handleHover()}></i></a>
    )
  };
  
}

class App extends React.Component {
  render() {
    return (
      <Icon href="#" icon="fa fa-2x fa-twitter" />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React: Button Dropdown

This entry is part 34 of 35 in the series React JS

See the Pen React Dropdown by Tristan W (@tristaaan) on CodePen.

var Dropdown = React.createClass({
  getInitialState() {
    return { toggled: false };
  },
  componentDidUpdate: function(prevState) {
    if (this.state.toggled && !prevState.toggled) {
      window.addEventListener("click", this.handleClickOutside);
    } else if (!this.state.toggled && prevState.toggled) {
      window.removeEventListener("click", this.handleClickOutside);
    }
  },
  handleClickOutside: function(e) {
    var children = this.getDOMNode().getElementsByTagName("*");
    for (var x in children) {
      if (children[x] == e.target) {
        return;
      }
    }
    this.toggle();
  },
  toggle(e) {
    this.setState({ toggled: !this.state.toggled });
  },
  render() {
    var isHidden = !this.state.toggled ? "hidden" : "";
    return (
      <div className="dropdown">
        <button
          ref="dropdownButton"
          className="dropdown-button"
          onClick={this.toggle}
        >
          {this.props.buttonText}
        </button>
        <section
          ref="dropdownContent"
          className={isHidden + " dropdown-content"}
        >
          {this.props.children}
        </section>
      </div>
    );
  }
});

var Main = React.createClass({
  render() {
    return (
      <Dropdown buttonText="hello">
        <p>Goodbye</p>
      </Dropdown>
    );
  }
});

React.render(<Main />, document.getElementById("content"));

ReactJS: Change Color Simple Component

This entry is part 33 of 35 in the series React JS

See the Pen React simple component by daryl (@darylw) on CodePen.

var green = '#39D1B4';
var yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      color: green
    }
    
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    let newColor = (this.state.color == green ? yellow : green);
    this.setState({ color: newColor });
  }
  
  render() {
    return (
      <div className="btn-block" style={{background: this.state.color}}>
        <h1 >
          Change my color
        </h1>
        <button className="btn" onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }  
}

ReactDOM.render(<Toggle />, document.getElementById('app'));