I am having difficulty to align components(widgets, html components, react components etc.) - css

Question

I am new to flutter. However, I am having difficulty to align the widgets. I have also tried to learn CSS in the past. The thoughest part of it was to align the html components.
There are many properties like padding, margin, alignment, crossAxisalignment etc. Actually, I know where to use that properties, but when I use them the result is not what I expected.
However, I think if I can learn how to align in flutter. It will be easier to position in all others. For instance, I need to learn how to locate the color palette in the right and bottom of the phone. Every time when I need to locate something like that I am searching it and find the solution. That takes a lot of my time. So, what is the best way to learn how to position that widgets. Is there any source that I can use?
Here is the code:
import 'package:flutter/material.dart';
class Todo extends StatefulWidget {
#override
_TodoState createState() => _TodoState();
}
class _TodoState extends State<Todo> {
TextEditingController _controller = new TextEditingController();
List colors = [ Colors.grey[800], Colors.deepPurpleAccent, Colors.teal,Colors.amber];
int index=0;
String _text;
int _maxLength = 30;
#override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
backgroundColor:colors[index] ,
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
reverse: true,
child: Container(
padding: EdgeInsets.fromLTRB(0, 50, 0, bottom),
child: Stack(
children: [
TextField(
style: TextStyle(color: Colors.white),
maxLengthEnforced: true,
maxLength: _maxLength,
onTap: null,
controller: _controller,
autocorrect: false,
textCapitalization: TextCapitalization.sentences,
onChanged: (String text) {
if (text.length <= _maxLength)
_text = text;
else
_controller.text = text;
},
decoration: InputDecoration(
focusColor: Colors.red,
border: OutlineInputBorder(),
fillColor: Colors.white,
),
),
TextField(
style: TextStyle(color: Colors.white),
maxLines: null,
decoration: InputDecoration(
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
),
Positioned(
right: 5,
bottom: 0,
child: IconButton(
icon: Image.asset('assets/colorize.png'),
tooltip: 'Closes app',
onPressed: (){
setState(() {
if(index<colors.length)
index++;
if(index==colors.length)
index=0;
print("index: " + index.toString() + " len: " +colors.length.toString());
});
},
),
)
],
),
),
),
);
}
}

Answer 1

You can use a positioned widget, that will give you a freedom to position objects inside a STACK, but if you want your positioning to be more accurate / cleaner (still achievable with positioned widget), you can go with the Row and Column widgets,
Kindly refer to the flutter docs For Row Widget
they have some interactive examples to experiment with, for your need, what I would do is to use the "MediaQuery.of(context).size.height, and MediaQuery.of(context).size.width and reduce the icon size, or you can do this also,
This will position your palette in the right bottom of your screen and still have options to add other widgets to your app,
Stack(
children: [
Positioned(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text("Hello")],
)
],
))
],
);
you will find the "Hello" in the right bottom of your screen for the code above.
Replace the Text widget with a choice of your own, and Happy Coding :)

Answer 2

I found the answe. Just need to use floatingActionButton outside the SingleChildScrollView. Thus, The color palette will stick into bottom-wight.
Here is the code
floatingActionButton: IconButton(
icon: Image.asset('assets/colorize.png'),
tooltip: 'Closes app',
onPressed: () {
setState(() {
if (index < colors.length) index++;
if (index == colors.length) index = 0;
print("index: " +
index.toString() +
" len: " +
colors.length.toString());
});
},
),