Flutter Beautiful Buttons For Beginners | Row | Column

Watch the video how to make a beautiful button using row and column and flexible. This button is a dynamic button.

Take a look at the code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart';
import 'package:provider_test/home_page.dart';
import 'package:provider_test/second_page.dart';

import 'data_class.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFfefcff),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,

        children:  [
          Container(
            margin: const EdgeInsets.only(left: 40, right: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: 60,
                  height: 60,
                  child: Icon(Icons.add, color: Color(0xFF74beef),),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),

                      border: Border.all(
                          color: Color(0xFF74beef),
                          width: 1
                      )
                  ),
                ),
                SizedBox(width: 20,),
                Flexible(
                  child: Container(
                    height: 60,
                    width: double.maxFinite,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),

                        color: Color(0xFF74beef)
                    ),
                    child: Container(
                      padding: const EdgeInsets.only(left: 20, right: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: const [
                          Text("Next Page", style: TextStyle(fontSize: 20,color: Colors.white),

                          ),
                          Icon(Icons.skip_next, color: Colors.white,)

                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          )
        ]
      ),
    );
  }
}

Here we started with Column widget to center everything in the screen

And then we used row inside the column and then we used another row inside the row.

So it has nested row.