Preview for lightning screen flow component

I wound up hiding the Flow footer and creating my own [Next] button. Clicking the [Next] button triggers JS controller code that validates the input.

A modal would be very easy in this case.

Create a new component named as LightningFlow

<aura:component description="LightningFlow" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global">
    <aura:attribute name="testAttr" type="String"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:flow aura:id="flowData"/>
</aura:component>

Controller as :

({
    doInit: function(component, event, helper){
        alert(component.get('v.testAttr'));
        const flow = component.find("flowData");
        flow.startFlow("CreateAccountViaFlow");
    }
});

Then from your main component just call this component as a modal

<aura:attribute type="Boolean" name="ismodalClicked"/>
<lightning:button onclick="{!c.openmodal}">Start Flow</lightning:button>
<aura:if isTrue="{!v.ismodalClicked}">
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <c:LightningFlow testAttr="123"/>
                </div>
            </div>
            <div class="slds-modal__footer">
            </div>
        </div>
    </div>
</aura:if>
<div class="slds-backdrop " aura:id="Modalbackdrop"></div>

Controller :

closeModal:function(component,event,helper){
    component.set('v.ismodalClicked', false);
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.removeClass(cmpBack,'slds-backdrop--open');
    $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
},
openmodal: function(component,event,helper) {
    component.set('v.ismodalClicked', true);
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.addClass(cmpTarget, 'slds-fade-in-open');
    $A.util.addClass(cmpBack, 'slds-backdrop--open');
}

Now your flow opens up as a modal, if you want to pass values then you can pass via attributes etc, as the modal is the child component of your main component.

UPDATE

To pass value from parent to modal you can make use of attribute.

From parent change to <c:LightningFlow testAttr="123"/>

In your LightningFlow component just define the same attribute.

<aura:attribute name="testAttr" type="String"/>

Now you can access the attribute via component.get('v.testAttr'). Check code above.