Skip to main content

7. Alert With List

Alert

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(16),
),
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Icon(
Icons.info_outline_rounded,
color: Colors.blue,
),
const Gap(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Ensure that these requirements are met:',
style: TextStyle(
fontSize: 14,
color: Colors.blue,
),
),
const Gap(6),
...[
'At least 10 characters (and up to 100 characters)',
'At least one lowercase character',
].map((e) {
return Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'•',
style: TextStyle(
fontSize: 14,
color: Colors.blue,
),
),
const Gap(12),
Expanded(
child: Text(
e,
style: const TextStyle(
fontSize: 14,
color: Colors.blue,
),
),
),
],
),
);
}),
],
),
),
],
),
),