CODEWITHSUNDEEP
flutter
FroDK
FroDK

Reputation: 61

How to create such an element in Flutter?

I want to create such an element. But I'm still new to flutter. Can there be something similar? I need the button and the text box (I don't know what it's called) to have States depending on which it changed color and the plus button turned on and off. The text changes in the first and second text boxes so they should stretch. *The button and text box still need to be moved to the right side

enter image description here

enter image description here

Upvotes: 1

Views: 95

Answers (1)

hewa jalal
hewa jalal

Reputation: 963

here is a working code, you can further change size and colors to satisfy your requirements

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

class _MyAppState extends State<MyApp> {
  var _numberCounter = 0;
  var _clickCounter = 0;
  var _changeColor = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Material(
            elevation: 6.0,
            child: Row(children: <Widget>[
              Container(
                padding: EdgeInsets.all(8),
                child: Text(
                  '$_numberCounter',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
              Container(
                color: _changeColor ? Colors.green : Colors.grey,
                padding: const EdgeInsets.all(8.0),
                child: GestureDetector(
                    onTap: () => setState(() {
                          _changeColor = !_changeColor;
                          _numberCounter++;
                          _clickCounter++;
                        }),
                    child: Icon(Icons.add), color: Colors.white),
              ),
              Expanded(
                child: Text(
                  '$_clickCounter per click',
                  style: TextStyle(fontSize: 20.0),
                  textAlign: TextAlign.center,
                ),
              )
            ]),
          ),
        ),
      ),
    );
  }
}

a preview

Upvotes: 2

Related Questions