Set meterial icon color change onClick react

Asked
Active3 hr before
Viewed126 times

6 Answers

changereactcolor
90%

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink),,A material design icon button

Example_snippet/controller/utility/_change.js/ double _volume = 0.0; // ... . . .
double _volume = 0.0;

// ...

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      IconButton(
        icon: const Icon(Icons.volume_up),
        tooltip: 'Increase volume by 10',
        onPressed: () {
          setState(() {
            _volume += 10;
          });
        },
      ),
      Text('Volume : $_volume')
    ],
  );
}
load more v
88%

Hint: use reverse to make your icon look like a button,Icons are visual indicators usually used to describe action or intent,,provide all props from react-native Icon component,The icon sets in React Native Elements are made possible through react-native-vector-icons

Example_snippet/controller/utility/_react.js/ import { Icon } from 'react-na. . .
import { Icon } from 'react-native-elements'
<Icon  name='rowing' />
<Icon  name='g-translate'  color='#00aced' />
<Icon  name='sc-telegram'  type='evilicon'  color='#517fa4'/>
<Icon  reverse  name='ios-american-football'  type='ionicon'  color='#517fa4'/>
<Icon  raised  name='heartbeat'  type='font-awesome'  color='#f50'  onPress={() => console.log('hello')} />
72%

Refer to the Icons section of the documentation regarding the available icon options,,The API documentation of the IconButton React component

Example_snippet/controller/utility/_react.js/ import IconButton from '@mater. . .
import IconButton from '@material-ui/core/IconButton';
// or
import {
   IconButton
} from '@material-ui/core';
65%

Step 4: Now, after the installation, we can change the colors of the icon by using the color prop of the icon component,  We can also use the style prop for the same

Example_snippet/controller/utility/_react.js/ npm install @material-ui/core . . .
npm install @material - ui / core
load more v
75%

Example_snippet/controller/utility/_react.js/ class Utilitybar extends React. . .
class Utilitybar extends React.Component {
  constructor(props) {
    super(props)
    this.onButtonClicked = this.onButtonClicked.bind(this)
    this.state = { currentButton: null }
  }

  onButtonClicked (id) {
    this.setState({ currentButton: this.state.currentButton === id ? null : id })
  }

  render(){
    return (
      <div>
        <IconButton
          color={this.state.currentButton === 0 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(0)}>
          <FaPlayCircle/>
        </IconButton>
        <IconButton
          color={this.state.currentButton === 1 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(1)}>
          <FaRegFileAlt/>
        </IconButton>
      </div>
    );
  }
}
40%

I expect only clicked button to change color, But obviously they all use the same state, and when state is changed then the color of all buttons is changed

Example_snippet/controller/utility/_react.js/ class Utilitybar extends React. . .
class Utilitybar extends React.Component {
  constructor(props) {
    super(props)
    this.onButtonClicked = this.onButtonClicked.bind(this)
    this.state = { currentButton: null }
  }

  onButtonClicked (id) {
    this.setState({ currentButton: this.state.currentButton === id ? null : id })
  }

  render(){
    return (
      <div>
        <IconButton
          color={this.state.currentButton === 0 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(0)}>
          <FaPlayCircle/>
        </IconButton>
        <IconButton
          color={this.state.currentButton === 1 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(1)}>
          <FaRegFileAlt/>
        </IconButton>
      </div>
    );
  }
}