Flutter para bebes example

flutter_bebes_main.dart

import 'package:flutter/material.dart';

const primary = Color(0xFF50C2C9);
const secondary = Color(0xFF24D0C6);
const tertiary = Color(0xFF4A4A4A);
const background = Color(0xFFF5F5F5);

class Task {
  String name;
  bool done;

  Task(this.name, this.done);
}

final List<Task> tasks = [
  Task('Recoger a Marta', false),
];

class TaskListPage extends StatefulWidget {
  const TaskListPage({Key? key}) : super(key: key);
  @override
  State<TaskListPage> createState() => _TaskListPageState();
}

class _TaskListPageState extends State<TaskListPage> {
  final newTaskController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => showModalBottomSheet(
          context: context,
          builder: (_) => Container(
            color: background,
            padding: const EdgeInsets.all(20),
            height: 200,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                TextField(
                  controller: newTaskController,
                  decoration: InputDecoration(
                    label: const Text('New Task'),
                    contentPadding: const EdgeInsets.all(10),
                    fillColor: Colors.white,
                    filled: true,
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10)),
                  ),
                ),
                ElevatedButton(
                  onPressed: () => setState(() {
                    if (newTaskController.text.isEmpty) return;
                    tasks.add(Task(newTaskController.text, false));
                    newTaskController.clear();
                    Navigator.of(context).pop();
                  }),
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      'Guardar',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        child: const Icon(Icons.add, color: Colors.white),
      ),
      body: Column(
        children: [
          Stack(
            children: [
              Container(
                width: double.infinity,
                height: 331,
                color: primary,
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 140, bottom: 20),
                      child: Image.network(
                        'https://codigobase.es/wp-content/uploads/2021/12/profile.png',
                        width: 114,
                      ),
                    ),
                    const Text(
                      'Welcome Arsalan Ahmed',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
              Image.network(
                'https://codigobase.es/wp-content/uploads/2021/12/shape.png',
                width: 200,
                fit: BoxFit.fitWidth,
              ),
            ],
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Task List',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Expanded(
                    child: ListView.builder(
                      itemCount: tasks.length,
                      itemBuilder: (_, index) {
                        final Task task = tasks[index];
                        return GestureDetector(
                          onTap: () => setState(() => task.done = !task.done),
                          child: Dismissible(
                            background: Container(
                              padding: const EdgeInsets.only(right: 10),
                              color: Colors.red.withOpacity(0.2),
                              alignment: Alignment.centerRight,
                              child: const Icon(Icons.delete),
                            ),
                            key: Key('task$index'),
                            onDismissed: (direction) {
                              setState(() {
                                tasks.removeAt(index);
                              });
                              ScaffoldMessenger.of(context).showSnackBar(
                                  SnackBar(
                                      content:
                                          Text('Task ${task.name} deleted')));
                            },
                            child: Card(
                              elevation: 2,
                              shape: const RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(20),
                                ),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(15),
                                child: Row(
                                  children: [
                                    Icon(
                                      task.done
                                          ? Icons.check_box_outlined
                                          : Icons
                                              .check_box_outline_blank_rounded,
                                      color: primary,
                                    ),
                                    const SizedBox(width: 10),
                                    Text(task.name,
                                        style: TextStyle(
                                            decoration: task.done
                                                ? TextDecoration.lineThrough
                                                : TextDecoration.none)),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              Image.network(
                'https://codigobase.es/wp-content/uploads/2021/12/shape.png',
                fit: BoxFit.fitHeight,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                const SizedBox(height: 20),
                Image.network(
                  'https://codigobase.es/wp-content/uploads/2021/12/splash-image.png',
                  fit: BoxFit.cover,
                  width: 180,
                  height: 168,
                ),
                const SizedBox(height: 40),
                const Text(
                  'Things To Do With Simple List',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 20),
                const Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper leo in eros parturient arcu odio diam. Gravida faucibus ac mauris et risus.',
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 60),
                ElevatedButton(
                  onPressed: () => Navigator.of(context).pushReplacement(
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) => const TaskListPage(),
                    ),
                  ),
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      'Empezar',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: primary,
          secondary: secondary,
          background: background,
        ),
        textTheme: Theme.of(context).textTheme.apply(
              bodyColor: tertiary,
              displayColor: tertiary,
            ),
      ),
      home: HomePage(),
    );
  }
}

void main() {
  runApp(MyApp());
}