Material Design e Cupertino no Flutter: o que são e como usar

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData.dark(),
    home: LoginScreen(),
  ));
}
class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'Welcome',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24),
              CustomizeFormField(placeholder: 'Name'),
              SizedBox(height: 16),
              CustomizeFormField(placeholder: 'Password'),
              SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }
}
class CustomizeFormField extends StatelessWidget {
  const CustomizeFormField({super.key, required this.placeholder});
  final String placeholder;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: TextFormField(
        style: TextStyle(color: Colors.black),
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          fillColor: Colors.white,
          filled: true,
          hintText: placeholder,
          hintStyle: TextStyle(color: Colors.grey),
          contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
        ),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(CupertinoApp(
    debugShowCheckedModeBanner: false,
    home: CupertinoLoginScreen(),
  ));
}
class CupertinoLoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      backgroundColor: Color.fromRGBO(21, 21, 21, 1),
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'Welcome',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24),
              CupertinoCustomizeFormField(placeholder: 'Name'),
              SizedBox(height: 16),
              CupertinoCustomizeFormField(placeholder: 'Password'),
              SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }
}
class CupertinoCustomizeFormField extends StatelessWidget {
  const CupertinoCustomizeFormField({required this.placeholder});
  final String placeholder;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 8),
          CupertinoTextField(
            placeholder: placeholder,
            padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
            style: TextStyle(color: Colors.black), 
            placeholderStyle: TextStyle(color: Colors.grey), 
            decoration: BoxDecoration(
              color: Colors.white, 
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
        ],
      ),
    );
  }
}

dependencies:
  flutter:
    sdk: flutter
  flutter_platform_widgets: ^7.0.1

import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
void main() {
  runApp(PlatformApp(
    debugShowCheckedModeBanner: false,
    home: PlatformLoginScreen(),
  ));
}
class PlatformLoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'Welcome',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24),
              PlatformTextField(hintText: 'Username'),
              SizedBox(height: 16),
              PlatformTextField(hintText: 'Password', obscureText: true),
              SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }
}

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
  runApp(MaterialApp(
    theme: ThemeData.dark(),
    debugShowCheckedModeBanner: false,
    home: LoginScreenWithIcon(),
  ));
}
class CupertinoCustomizeFormField extends StatelessWidget {
  const CupertinoCustomizeFormField({required this.placeholder});
  final String placeholder;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: CupertinoTextField(
        placeholder: placeholder,
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
      ),
    );
  }
}
class CustomizeFormField extends StatelessWidget {
  const CustomizeFormField({required this.placeholder});
  final String placeholder;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: TextFormField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          fillColor: Colors.white,
          filled: true,
          hintText: placeholder,
          hintStyle: TextStyle(color: Colors.grey),
          contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
        ),
      ),
    );
  }
}
class LoginScreenWithIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (Platform.isIOS) Icon(Icons.apple, size: 24),
                  Text(
                    'Welcome',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ],
              )
              /** campos de formulário */
            ],
          ),
        ),
      ),
    );
  }
}

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main(){
  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    )
  );
}
class CupertinoCustomizeFormField extends StatelessWidget {
  const CupertinoCustomizeFormField({required this.placeholder, this.obscureText = false});
  final String placeholder;
  final bool obscureText;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: CupertinoTextField(
        placeholder: placeholder,
        obscureText: obscureText,
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
      ),
    );
  }
}
class CustomizeFormField extends StatelessWidget {
  const CustomizeFormField({required this.placeholder});
  final String placeholder;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: TextFormField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          fillColor: Colors.white,
          filled: true,
          hintText: placeholder,
          hintStyle: TextStyle(color: Colors.grey),
          contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
        ),
      ),
    );
  }
}
Widget customizeFieldFactory({required String placeholder}) {
	  if (Platform.isIOS) {
    return CupertinoCustomizeFormField(placeholder:placeholder);
  } else {
    return CustomizeFormField(placeholder: placeholder);
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'Welcome',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 24),
              customizeFieldFactory(placeholder: 'Username'),
              SizedBox(height: 16),
              customizeFieldFactory(placeholder: 'Password'),
              SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }
}