How to add 3 columns in flutter? - flutter

Question

I want to achieve this:
For now, I got this:
this is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/ProgressHUD.dart';
class LogIn extends StatefulWidget {
const LogIn({Key? key}) : super(key: key);
#override
State<LogIn> createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
bool isAPIcallProcess = false;
bool hidePassword = true;
GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
String? username;
String? password;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xffF24004),
body: Center(
child: Stack(
children: [
Positioned(
left: 20,
right: 20,
top: 100,
child: Image.asset(
"lib/img/pomodoro.png",
width: 250,
height: 250,))
],
),
),
),
);
}
}
So, how can I achieve the 3 columns? I tried to make another stful widget but I don't know why but it doesn't work, I think is because the main design is in this MaterialApp widget.

Answer 1

I think it would be better if you separate material-app context in further use case. Also try using Align widget for dynamic placement.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffF24004),
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: const Alignment(0, -.75),
child: Container(
width: constraints.maxWidth * .8, //image size
height: constraints.maxWidth * .8,
color: Colors.green,
),
// Image.asset(
// "lib/img/pomodoro.png",
// width: 250,
// height: 250,
// ),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
...List.generate(
3,
(index) => Container(
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: index.isEven ? Colors.deepPurple : Colors.amber,
),
)
],
),
)
],
),
),
);
}
More about Stack