I am currently working on an app design that includes 3 flat buttons placed in a row. The first button is selected by default and displays a listView widget. The other two buttons should be greyed out until clicked, at which point they will show another listView widget. I need to ensure that only one button can be focused at a time, with the others appearing greyed out. I have researched many articles but have yet to find a solution that meets my needs.
To implement this functionality, you can utilize a state variable which will determine the content to be displayed. Below is a sample code showcasing how this can be achieved:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Foo extends StatefulWidget {
@override
State<StatefulWidget> createState() => FooState();
}
class FooState extends State<Foo> {
int buttonSelected = 0;
List<String> list1 = ["1st list"];
List<String> list2 = ["2nd list"];
List<String> list3 = ["3rd list"];
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
getButton(0),
getButton(1),
getButton(2),
],
),
getBody(),
],
);
}
Widget getButton(int index) {
return FlatButton(
onPressed: () {
setState(() {
buttonSelected = index;
});
},
color: buttonSelected == index ? Colors.red : Colors.grey,
child: Text("button $index"));
}
Widget getBody() {
if (buttonSelected == 0) {
return getListView(list1);
} else if (buttonSelected == 1) {
return getListView(list2);
} else {
return getListView(list3);
}
}
Widget getListView(List<String> currentList) {
return ListView.builder(
shrinkWrap: true,
itemCount: currentList.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(currentList[index]);
});
}
}
The value of buttonSelected determines the displayed content. For further separation of logic and presentation layers, consider exploring Bloc which offers multiple examples.
Recently, I was experimenting with a basic SelectField feature and it seems to be functioning properly. However, I can't help but notice how unattractive it looks! My setup includes the default MaterialUI component styles along with the standard them ...
I'm currently working on a homepage that requires different page links. Below you can find the necessary code snippet for setting up the tabs and routes for each page: <li> The tabs are located here - <Link to="/demo">D ...
Is there a way to override a highly specific class rule? Take, for instance, the .MuiAccordionSummary-content.Mui-expanded class within the AccordionSummary const useStyles = makeStyles(() => ({ expanded: { marginBottom: 0, }, })); whe ...
When I try to fetch data from the server for autocomplete, it returns no options even though two options are displayed in the console after making an API call. The value I enter includes two empty spaces followed by 'IPH', triggering the API call ...
Currently, the process to install and run material-ui docs locally involves two separate npm install commands - one within material-ui directory, and another within material-ui/docs directory. You may want to use the docs site as a starting point for your ...
Trying to test functionality based on the material-ui toggle component with jest and enzyme has been challenging for me. Even though my generic clickIt function usually works well with other material-ui components, it doesn't seem to trigger the stat ...
Struggling to arrange 10 Avatars side by side for showcasing the user list. However, encountering an issue where the Avatars are being duplicated and showing incorrect initials when passing JSON data. Experimented with this in Code Sandbox linked below. h ...
This snippet showcases the code for my custom Buttons component: import React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; const style = { button: { margin: 2, padding: 0, minWidth: 1, }, }; cons ...
I have been working on adding a dark mode toggle to my website. Everything seems to be set up correctly, and the toggle appears in the right place. I am using the useState hook to handle the toggle functionality. However, when I click on the toggle, the th ...
During the development of my application, I encountered an issue with rendering a list of items. The state consists of a simple array containing elements with a name, an identifier, and a selected key that determines whether special styles should be applie ...
Is there a way to customize the padding (height) for each individual item (MenuItem) in the list of options? The following code snippet didn't yield the desired outcome: <Autocomplete ... renderOption={(props, option) => ( <MenuItem ...
Trying to assign a custom palette color to the color prop of a Typography tag. The theme setup in theme.ts is as follows: declare module "@mui/material/styles" { interface Palette { tertiary: Palette['primary']; } interface P ...
Struggling to style my MUI Slider the way I want. Can't figure out how to make the markLabel CSS break my text into multiple lines. Using the slider for a "Strongly Agree, Agree, Neutral, Disagree, Strongly Disagree" selector, but text on smaller scre ...
Currently in the process of developing a React NextJS application integrated with MaterialUI. I have a header component that contains a switch element intended to facilitate toggling between dark and light modes within my theme file (which is a separate en ...
I recently set up a 'create react app' with React 17 and MUI 5. I made adjustments to the MUI 5 configuration to utilize the 'styled-engine' as recommended in the documentation on mui.com, allowing me to use styled components. While I ...
Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...
I'm currently using the latest version of MUI with React, but I'm running into an issue where my custom CSS is not working as expected. The console is showing the following error: makestyles is no longer exported from @mui/material/styles, inst ...
Currently, I am working on creating 2 select boxes using the autocomplete component in Material UI. You can check out the documentation here: https://mui.com/material-ui/react-autocomplete/#checkboxes I have encountered a specific scenario that I am tryin ...
I have two custom React components within a Create React App project, one acting as the parent (App.js) and the other as the child component (QuoteMachine.js). I managed to successfully implement the withStyles HOC API in the parent component, App.js. How ...
I am currently working with a React component that comes from a module located in the node_modules folder: type Props = { someProps: any }; export function ComponentA(props: Props) { const [value, setValue] = React.useState(""); return ( <Te ...