How to make this container in flutter? - flutter

Question

enter image description here
I wan to make this container and I have try it making in container by dividing it in 2 row. After that I divide first row in 3 row again but It was not same design made. So, please help me to make this.

Answer 1

Take a look at https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e. It's great tutorial for Flutter layout positioning. Have fun!
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 150,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: const Color(0xff272830),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
header(),
const Text(
'To register, fill out the form in the sign-up section above. In order to activate your account, we will send you an invitation email that you must confirm'),
],
),
);
}
Widget header() {
return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Row(mainAxisSize: MainAxisSize.min, children: [
ClipOval(
child: Image.network(
'https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2019/12/9-Best-Online-Avatars-and-How-to-Make-Your-Own-for-Free-image1-5.png',
width: 40,
height: 40,
fit: BoxFit.cover,
),
),
const SizedBox(width: 5),
Text('SIGN UP'),
]),
SizedBox(
height: 40,
child: OutlinedButton(
onPressed: () {},
child: const Text('Step 1',
style: TextStyle(
color: Colors.white,
)),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
)
]);
}
}

Answer 2

Try this
Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(12, 12, 12, 12),
padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(
Radius.circular(20),
)),
child: Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://picsum.photos/id/237/200/300'),
),
SizedBox(
width: 20,
),
Expanded(
child: Text(
"SIGN UP",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(24, 12, 24, 12),
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(16),
)),
child: Text("Step 1"),
),
],
),
SizedBox(
height: 8,
),
Container(
child: Text(
"To register, fill out the form in the sign-up section above. In order to activate your account, we will send you and activation email that you must confirm"),
),
],
),
)
],
),

Answer 3

Instead of container, you can do it by using Card. Take a look at this example from https://api.flutter.dev/flutter/material/Card-class.html
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextButton(
child: const Text('BUY TICKETS'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
TextButton(
child: const Text('LISTEN'),
onPressed: () {/* ... */},
),
const SizedBox(width: 8),
],
),
],
),
),