skip to Main Content

I want to know how to make this design in flutter – I know there is a library for it or a built in function but I forgot what it is called. I included an image (just the white and purple part). Thanksenter image description here

2

Answers


  1. Here you can set it with stack widget also but if you go through below you can manage ‘hope you are having a nice day’ dynamically in future also

    import 'package:flutter/material.dart';
    
    class ClassHome extends StatefulWidget {
      const ClassHome({super.key});
    
      @override
      State<ClassHome> createState() => _ClassHomeState();
    }
    
    class _ClassHomeState extends State<ClassHome> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.deepPurpleAccent,
          body: Column(
            children: [
                    Row(
                      children: [
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                                Text("Hey, Danial"),
                                Padding(
                                  padding: const EdgeInsets.only(top: 5),
                                  child: Text("Hope you are having a nice day!"),
                                )
                            ],
                          ),
                        ),
                        Icon(Icons.notifications_none_rounded)
                      ],
                    ),
              Padding(
                padding: const EdgeInsets.only(top: 15),
                child: Container(
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(25),
                      topRight: Radius.circular(25),
                    )
                  ),
                  padding: const EdgeInsets.all(15),
                  child: Column(
                    children: [
                      Text("Find your related job!"),
    
                      //Other child widgets...
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      }
    }
    
    Login or Signup to reply.
  2. Try below code

    Scaffold(
        backgroundColor: Colors.deepPurpleAccent,
        body: Column(
          children: [
            Container(
              height: 80,
              padding: EdgeInsets.symmetric(horizontal: 15,vertical: 5),
              child: Row(
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Hey, Danial"),
                        Padding(
                          padding: EdgeInsets.only(top: 5),
                          child: Text("Hope you are having a nice day!"),
                        )
                      ],
                    ),
                  ),
                  Icon(Icons.notifications_none_rounded, color: Colors.white)
                ],
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.only(top: 15),
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25),
                      )),
                  padding: EdgeInsets.all(15),
                  child: Column(
                    children: [
                      Text("Find your related job!"),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    

    Result: image

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search